elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟

更新時間：2023年12月05日 10:47:07 作者：No8g攻城獅

upload上傳是前端開發(fā)很常用的一個功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關于elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟,需要的朋友可以參考下

一、問題描述

elmentui 中的upload默認的提交行為是通過 action 屬性中輸入的 url 鏈接，提交到指定的服務器上。但是這種url提交文件的方式，在實際的項目環(huán)境中往往是不可取的。

我們的服務器會攔截所有的請求，進行權限控制，密鑰檢查，請求頭分析等安全行為控制。寫在這里的url無法實現(xiàn)定義請求參數(shù)之類的，就更不能進行后面的操作了。

所以最恰當?shù)姆绞剑褪亲远x文件的上傳行為。

二、實現(xiàn)方式

el-upload 中有一個屬性 http-request ，官方的描述是說覆蓋默認的上傳行為，可以自定義上傳的實現(xiàn)，類型是 function，可選值與默認值都省略。經(jīng)過我的探索，我發(fā)現(xiàn)它可以接收一個參數(shù)，這個參數(shù)保存了你文件上傳的對象。綁定的方法，會在【文件上傳】事件觸發(fā)后再觸發(fā)。比如說，你先選擇文件，點擊【上傳】按鈕，觸發(fā)上傳事件，才會觸發(fā)到 http-request 中綁定的函數(shù)。

三、實現(xiàn)步驟

先定義了一個 el-upload標簽，在里面先把自動上傳文件關閉，由于action是必填項，所以就塞了個#進去，在http-request 中綁定了我自定義的 handleFileUpload 函數(shù)。在這個函數(shù)里面，我實現(xiàn)了自定義文件上傳的請求。里面的button，用來上傳文件的。

3.1 方式一：選擇后自動上傳

利用 before-upload 上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject ，則停止上傳

template部分代碼如下：

<el-upload
  class="upload-demo"
  action="#"
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList"
  :http-request="handleFileUpload"
  >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
     將文件拖到此處，或 <em>點擊選取</em>
  </div>
</el-upload>

js代碼如下：

data(){
    return {
      loading = false,
      fileList: [], //深拷貝，判斷重名及第一步時的文件信息展示
    };
}

methods: {
      // 處理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 處理預覽操作
      handlePreview(file) {
        console.log(file);
      },
      // 處理超出圖片個數(shù)操作
      handleExceed(files, fileList) {
        this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
      // 處理文件上傳操作
      handleFileUpload(file) {
      		this.loading = true;
          // 調用后端服務器的接口
      		uploadFile(file.file).then((resp) => {
      			this.form.installImgUrl = resp.url;
      		}).catch((e) => {
      			this.$message.error(e.message);
      			this.$refs.upload.clearFiles();
      		})
      }
    }

handleFileUpload(file) 函數(shù)入?yún)?file 實際結果如下圖所示：

而后端服務器接受的是 file 實體，所以傳入后端的參數(shù)取值是 file.file。

來到 handleFileUpload(file) 函數(shù)中，用xhr接收文件上傳對象。新建一個FormData對象，將數(shù)據(jù)封裝到FormData中并提交到服務器，這和在頁面新建一個表單，然后提交表單是同一樣的。

如果不想上傳成功后顯示上傳文件列表，可以隱藏掉文件列表

可以在組件中設置 :show-file-list=“false”

或者

::v-deep .el-upload-list {
  display: none !important;
}

3.2 方式二：選擇圖片后手動上傳

其實選擇圖片后手動上傳，只需要在 el-upload 組件中添加如下 :auto-upload=“false” 屬性即可。可在 element官網(wǎng) 組件中 Upload 上傳查看。

然后再添加一個手動上傳的函數(shù)即可。比如下面的的 submitUpload() 函數(shù)

template代碼如下所示：

<el-upload
  class="upload-demo"
  action="#"
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :auto-upload="false"
  :on-exceed="handleExceed"
  :file-list="fileList"
  :http-request="handleFileUpload"
  >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
     將文件拖到此處，或 <em>點擊選取</em>
  </div>
</el-upload>
<div class="upload-btn">
      <el-button type="primary" @click="submitUpload" :loading="loading">確 定</el-button>
</div>

js代碼如下：

data(){
    return {
      loading = false,
      fileList: [], //深拷貝，判斷重名及第一步時的文件信息展示
    };
}

methods: {
      // 處理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 處理預覽操作
      handlePreview(file) {
        console.log(file);
      },
      // 處理超出圖片個數(shù)操作
      handleExceed(files, fileList) {
        this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
      // 處理文件上傳操作
      handleFileUpload(file) {
      		this.loading = true;
          // 調用后端服務器的接口
      		uploadFile(file.file).then((resp) => {
      			this.form.installImgUrl = resp.url;
      		}).catch((e) => {
      			this.$message.error(e.message);
      			this.$refs.upload.clearFiles();
      		})
      },
      submitUpload() {
      	 this.$refs.upload.submit();
      }
    }

3.3 拓展：上傳文件夾

使用 el-upload 組件上傳整個文件夾。

只需要為 input 輸入框設置 webkitdirectory 屬性

  mounted() {
    if (this.$route.query.type === 'folder') {
      this.$nextTick(() => {
        document.querySelector('.el-upload__input').webkitdirectory = true
      })
    }
  },