基于 element ui Upload 上传 的粘贴截图上传图片功能

需求背景
由于项目需要，原本简单的图片上传功能需要支持以下功能：
可以从其他地方复制图片，或者截图后，直接粘贴过来就可以上传
原本的图片上传是用的 element ui，于是我便基于这个组件去改了。

以下是代码：

<el-upload
  :action="api"
  ref="uploadMutiple"
  list-type="picture-card"
  :file-list="fileList"
  :limit="limit"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<div id="preview" @paste="handlePaste">
   <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
</div>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

<script>
  export default {
    data() {
      return {
      	api: '',
      	limit: 2,
      	fileList: [],
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
       // 监听粘贴操作
       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;
        }
        if(this.fileList.length>=this.limit){
          this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
          return
        }
        this.$refs.uploadMutiple.handleStart(file);// 将粘贴过来的图片加入预上传队列
        this.$refs.uploadMutiple.submit(); // 提交图片上传队列
      },
      
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>