实现截图粘贴上传、拖拽上传-CFANZ编程社区

之前上传方式是使用element-ui的el-upload,现在需要添加一个需求功能实现截图粘贴也可以上传。

直接上代码：

<div>
    <div>附件</div>
            //为了第一次截屏，粘贴在对应组件上
          <div id="editable" contenteditable="true"></div>
          <el-upload
            ref="uploadFiles"
            v-if="configType != 2"
            style="width: 100%"
            class="upload-demo"
            drag
            :action="fileUrl + '/file/upload'"
            name="file_upload"
            :headers="{
              accessToken: token
            }"
            :on-success="uploadSuccess"
            :on-remove="removeFile"
            multiple
            :file-list="attachFileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip">
              支持格式：rar、zip、doc、docx、pdf、png、jpg
            </div>
          </el-upload>
</div>

在methods中添加方法：

 // 监听截屏对应事件粘贴方法
    listenerPaste() {
      let _this = this;
      window.addEventListener("paste", function (event) {
        event.preventDefault();
        event.stopPropagation();
        // 为了截屏时，粘贴在当前的组件，第一次必须促发一次
        (function () {
          document.getElementById("editable").click();
        })();
        _this.paste_img(event);
      });
    },
    // 粘贴方法
    paste_img(e) {
      let _this = this;
      if (e.clipboardData.items) {
        let ele = e.clipboardData.items;
        for (var i = 0; i < ele.length; ++i) {
          if (ele[i].kind == "file" && ele[i].type.indexOf("image/") !== -1) {
            var fileObj = ele[i].getAsFile(); //获取图片信息

            window.URL = window.URL || window.webkitURL;
            var blobUrl = window.URL.createObjectURL(fileObj);
            fileObj.src = blobUrl;
            console.log(blobUrl);
            this.convertImgToBase64(blobUrl, function (base64Img) {
              let blobData = _this.dataURLtoBlob(base64Img);

              let formdata = new FormData(); // new一个formdata对象
              let _filename = new Date().getTime() + ".jpg"; // 修改文件名
              formdata.append("file_upload", blobData, _filename); // key值, 二进制类型文件,文件名

              // 使用axios
              uploadFile("/file/upload", formdata).then(res => {
                console.log("res", res, fileObj);
                // 格式化文件对象，与el-upload的uploadSuccess方法返回文件对象对应
                let fileCopy = {
                  ...fileObj,
                  response: JSON.parse(JSON.stringify(res)),
                  percentage: 100,
                  raw: fileObj,
                  status: "success",
                  name: fileObj.name,
                  size: fileObj.size,
                  type: fileObj.type
                };
                _this.uploadSuccess(res, fileCopy, [fileCopy]);
                window.removeEventListener("paste", _this.paste_img);
              });
            });
          }
        }
      } else {
        console.log("non-chrome");
      }
    },
    // base64Img
    convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement("CANVAS"),
        ctx = canvas.getContext("2d"),
        img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || "image/png");
        console.log("dataURL", dataURL);
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
      console.log(" img.src", img.src);
    },

    //将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },