fix:项目初始化

src/components/UploadImgPaste/index.vue

@@ -0,0 +1,192 @@
+<!--
+ * @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.webImgReq, // 存放图片的域名
+      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>