扩展element-ui el-upload组件，实现复制粘贴上传图片文件，带图片预览功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了扩展element-ui el-upload组件，实现复制粘贴上传图片文件，带图片预览功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

扩展element-ui的el-upload上传组件，实现复制粘贴上传图片文件，带图片预览功能

需求说明

原业务系统中的图片上传功能经常使用，普通的添加按钮只能通过系统对话框打开本地计算机目录，
在本地文件夹中选择要上传的图片。
导致在使用业务系统过程中，截图后需要先将图片存储到本地计算机目录，再点击页面图片上传。
在重复使用该功能时会浪费过多的时间在图片保存，上传。
为了解决业务该问题，亟需对该图片上传功能进行改造，避免业务人员过多的时间浪费在图片上传操作。

扩展element-ui el-upload组件，实现复制粘贴上传图片文件，带图片预览功能

改造路线

为了简化图片上传步骤，增加直接粘贴 “粘贴板”中的图片文件，做到图片不落地，减少图片上传所需要的操作步骤。

改造前分析

通过对前端框架的分析，当前图片上传功能，采用 element-ui 组件，版本为 2.15.6
实现粘贴图片，需要监听ctrl + v 命令

开始改造

控件改造

在窗口的 el-form 控件参数中添加 @paste.native 事件，事件绑定方法名 handlePaste
也可以在其他控件中添加事件监听，看个人需求。

注意：监听粘贴事件时，需要当前页面先获取焦点，否则无法正常监听，可以在页面加载后调用 focus() 获取焦点

粘贴功能Js部分参考资料：https://blog.csdn.net/blue__k/article/details/125296866

<el-form
  ref="xxxx"
  @paste.native="handlePaste"
  :model="form"
  label-position="right"
  label-width="92px"
  class="page-form"
  style="width: 100%;"
>
------------------------ 分割线 ----------------------
// el-upload控件不用做任何修改，此处仅作展示
<el-upload  
  class="el-upload–picture-card"
  action=""
  :limit="12"
  ref="upload"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview4"
  :before-upload="beforeAvatarUpload4"
  :on-remove="handleRemove4"
  :on-change="handleEditChange4"
  :http-request='uploadlinkmanAfter'
  :file-list="fileList"
  accept=".png,.jpg,.bmp,.jpeg"
  :class="{hide:hideUploadEdit4}"
    >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">
      只能上传(png,jpg,bmp,jpeg)图片文件,不超过10MB,只允许上传一份文件
    </div>
</el-upload>

Javascript 实现函数

/**
 * 监听粘贴操作
 */
handlePaste(e) {
  var clipboardData = e.clipboardData; // IE
  if (!clipboardData) {
      //chrome
    clipboardData = e.originalEvent.clipboardData;
  }
  var items='';
  items = (e.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){
    // 上传到图片服务器
    xxxxx.uploadImage2OSS(file);
  }
},

遇到的问题（可以监听到粘贴事件，但没有生成缩略图）

在生成预览图的时候遇到了粘贴后的图片没有生成预览图片，跟踪到element-ui控件的源码中
先打开开发者工具，发现正常的预览图片 src 属性有 blob:http://localhost/xxxxx
由于该图片的url是本地缓存的图片文件，所以在upload控件中必然有图片缓存函数存在
继续跟踪upload控件有可能创建图片的源码，在index.vue文件第165行（仅供当前版本，其他版本可能有差异）中发现这样一行代码：file.url = URL.createObjectURL(rawFile);

handleStart(rawFile) {
  rawFile.uid = Date.now() + this.tempIndex++;
  let file = {
    status: 'ready',
    name: rawFile.name,
    size: rawFile.size,
    percentage: 0,
    uid: rawFile.uid,
    raw: rawFile
  };

  if (this.listType === 'picture-card' || this.listType === 'picture') {
    try {
      file.url = URL.createObjectURL(rawFile);
    } catch (err) {
      console.error('[Element Error][Upload]', err);
      return;
    }
  }

  this.uploadFiles.push(file);
  this.onChange(file, this.uploadFiles);
},

修改后的Javascript函数，调用upload控件中的 handleStart() 函数

/**
 * 监听粘贴操作
 */
handlePaste(e) {
  var clipboardData = e.clipboardData; // IE
  if (!clipboardData) {
      //chrome
    clipboardData = e.originalEvent.clipboardData;
  }
  var items='';
  items = (e.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){
    // 上传到图片服务器
    xxxxx.uploadImage2OSS(file);
    // 生成预览图
    this.$refs.upload.handleStart(file);
  }
},