擴(kuò)展element-ui的el-upload上傳組件，實(shí)現(xiàn)復(fù)制粘貼上傳圖片文件，帶圖片預(yù)覽功能

需求說(shuō)明

原業(yè)務(wù)系統(tǒng)中的圖片上傳功能經(jīng)常使用，普通的添加按鈕只能通過(guò)系統(tǒng)對(duì)話框打開(kāi)本地計(jì)算機(jī)目錄，
在本地文件夾中選擇要上傳的圖片。
導(dǎo)致在使用業(yè)務(wù)系統(tǒng)過(guò)程中，截圖后需要先將圖片存儲(chǔ)到本地計(jì)算機(jī)目錄，再點(diǎn)擊頁(yè)面圖片上傳。
在重復(fù)使用該功能時(shí)會(huì)浪費(fèi)過(guò)多的時(shí)間在圖片保存，上傳。
為了解決業(yè)務(wù)該問(wèn)題，亟需對(duì)該圖片上傳功能進(jìn)行改造，避免業(yè)務(wù)人員過(guò)多的時(shí)間浪費(fèi)在圖片上傳操作。

改造路線

為了簡(jiǎn)化圖片上傳步驟，增加直接粘貼 “粘貼板”中的圖片文件，做到圖片不落地，減少圖片上傳所需要的操作步驟。

改造前分析

通過(guò)對(duì)前端框架的分析，當(dāng)前圖片上傳功能，采用 element-ui 組件，版本為 2.15.6
實(shí)現(xiàn)粘貼圖片，需要監(jiān)聽(tīng)ctrl + v 命令

開(kāi)始改造

控件改造

在窗口的 el-form 控件參數(shù)中添加 @paste.native 事件，事件綁定方法名 handlePaste
也可以在其他控件中添加事件監(jiān)聽(tīng)，看個(gè)人需求。

注意： 監(jiān)聽(tīng)粘貼事件時(shí)，需要當(dāng)前頁(yè)面先獲取焦點(diǎn)，否則無(wú)法正常監(jiān)聽(tīng)， 可以在頁(yè)面加載后調(diào)用 focus() 獲取焦點(diǎn)

粘貼功能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)圖片文件,不超過(guò)10MB,只允許上傳一份文件
    </div>
</el-upload>

Javascript 實(shí)現(xiàn)函數(shù)

/**
 * 監(jiān)聽(tīng)粘貼操作
 */
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('當(dāng)前瀏覽器不支持粘貼本地圖片，請(qǐng)打開(kāi)圖片復(fù)制后再粘貼！');
    return;
  }
  // 搜索剪切板items
  for (let i = 0; i < items.length; i++) {
    // 限制上傳文件類(lèi)型
    if (items[i].type.indexOf('image') !== -1) {
      file = items[i].getAsFile();
      break;
    }
  }
  // 對(duì)復(fù)制黏貼的類(lèi)型進(jìn)行判斷，若是非文件類(lèi)型，比如復(fù)制黏貼的文字，則不會(huì)調(diào)用上傳文件的函數(shù)
  if(file){
    // 上傳到圖片服務(wù)器
    xxxxx.uploadImage2OSS(file);
  }
},

遇到的問(wèn)題（可以監(jiān)聽(tīng)到粘貼事件，但沒(méi)有生成縮略圖）

在生成預(yù)覽圖的時(shí)候遇到了粘貼后的圖片沒(méi)有生成預(yù)覽圖片，跟蹤到element-ui控件的源碼中
先打開(kāi)開(kāi)發(fā)者工具，發(fā)現(xiàn)正常的預(yù)覽圖片 src 屬性有 blob:http://localhost/xxxxx
由于該圖片的url是本地緩存的圖片文件，所以在upload控件中必然有圖片緩存函數(shù)存在
繼續(xù)跟蹤upload控件有可能創(chuàng)建圖片的源碼，在index.vue文件第165行（僅供當(dāng)前版本，其他版本可能有差異）中發(fā)現(xiàn)這樣一行代碼：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函數(shù)，調(diào)用upload控件中的 handleStart() 函數(shù)

/**
 * 監(jiān)聽(tīng)粘貼操作
 */
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('當(dāng)前瀏覽器不支持粘貼本地圖片，請(qǐng)打開(kāi)圖片復(fù)制后再粘貼！');
    return;
  }
  // 搜索剪切板items
  for (let i = 0; i < items.length; i++) {
    // 限制上傳文件類(lèi)型
    if (items[i].type.indexOf('image') !== -1) {
      file = items[i].getAsFile();
      break;
    }
  }
  // 對(duì)復(fù)制黏貼的類(lèi)型進(jìn)行判斷，若是非文件類(lèi)型，比如復(fù)制黏貼的文字，則不會(huì)調(diào)用上傳文件的函數(shù)
  if(file){
    // 上傳到圖片服務(wù)器
    xxxxx.uploadImage2OSS(file);
    // 生成預(yù)覽圖
    this.$refs.upload.handleStart(file);
  }
},

最終實(shí)現(xiàn)的效果圖

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-400397.html

到了這里，關(guān)于擴(kuò)展element-ui el-upload組件，實(shí)現(xiàn)復(fù)制粘貼上傳圖片文件，帶圖片預(yù)覽功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！