web_hgtv_admin/src/components/UploadImgPaste/index.vue

<!--
 * @Author: 王涛
 * @Mail: no
 * @Date: 2020-09-29 19:56:44
 * @LastEditors: 王涛
 * @LastEditTime: 2021-01-07 22:22:03
-->
<template>
  <div class="box">
    <div v-on:paste="handlePaste" v-drag="handleDrag" >
      <img v-if='imageUrl' ref="preview" :src="domain+imageUrl" alt="" style="width:300px;height:300px;">
      <div v-else style="width:300px;height:300px;border:1px solid;padding:20px;">
        <div style="text-indent:2em;">将图片按<span style="color:red">cmd+C复制</span>到粘贴板，<span style="color:red">cmd+V粘贴</span>至此处；</div>
        <div style="text-indent:2em;">或者将图片拖拽至此处</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mediaUploadImg } from '@/api/components/UploadImgPaste'
export default {
  data() {
    return {
      domain: this.$store.getters.getSystemConfig.imgWebCdn, // 存放图片的域名
      imageUrl: ''
    }
  },
  props: {
    img: {
      type: String,
      default: ''
    }
  },
  watch: {
    img: function(val) {
      this.imageUrl = val
    }
  },
  mounted() {
    if (this.img) {
      this.imageUrl = this.img
    } else {
      this.imageUrl = ''
    }
  },
  methods: {
    handleDrag(event) {
      const items = Array.from(event.dataTransfer.items)
      let file = null
      if (!items || items.length === 0) {
        this.$message.error('当前浏览器不支持本地')
        return
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          break
        }
      }
      if (!file) {
        this.$message.error('粘贴内容非图片')
        return
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      this.file = file
      this.uploadPlans()
    },
    // 图片等比压缩
    handleCompressImage(file, type) {
      return new Promise((resolve, reject) => {
        try {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = (e) => {
            const image = new Image()
            image.src = e.target.result

            image.onload = () => {
              if (image.width > 720) {
                const canvas = document.createElement('canvas')
                const context = canvas.getContext('2d')
                const imageWidth = 720
                const imageHeight = (720 / image.width) * image.height
                canvas.width = imageWidth
                canvas.height = imageHeight
                console.log(imageWidth, imageHeight)
                context.drawImage(image, 0, 0, imageWidth, imageHeight)
                canvas.toBlob(
                  (blob) => {
                    resolve(new Blob([blob], { type: type }))
                  },
                  'image/jpeg',
                  0.9
                )
              } else {
                resolve(file)
              }
            }
          }
        } catch (e) {
          reject(e)
        }
      })
    },
    async handlePaste(event) {
      const items = (event.clipboardData || window.clipboardData).items
      let file = null
      if (!items || items.length === 0) {
        this.$message.error('当前浏览器不支持本地')
        return
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          break
        }
      }
      if (!file) {
        this.$message.error('粘贴内容非图片')
        return
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      // 先进行压缩再上传
      // const res = await this.handleCompressImage(file)
      // this.file = res
      this.file = file
      this.uploadPlans()
    },
    // 上传文件成功后回调
    uploadPlans() {
      const file = this.file
      if (!file) {
        this.$message.error('请粘贴图片后上传')
        return
      }
      this.loading = true
      const form = new FormData()
      form.append('file', file)
      form.append('type', this.type)
      mediaUploadImg(form).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.imageUrl = res.data.path
          this.changeImgUrl()
        } else {
          this.$message({
            type: 'error',
            message: '上传失败!'
          })
          this.imageUrl = ''
        }
      })
    },

    changeImgUrl() {
      this.$emit('changeImgUrl', this.imageUrl)
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>