快捷導(dǎo)航

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

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

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

一、問題描述

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

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

所以最恰當(dāng)?shù)姆绞?，就是自定義文件的上傳行為。

二、實(shí)現(xiàn)方式

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

三、實(shí)現(xiàn)步驟

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

3.1 方式一：選擇后自動(dòng)上傳

利用 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>點(diǎn)擊選取</em>
  </div>
</el-upload>

js代碼如下：

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

methods: {
      // 處理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 處理預(yù)覽操作
      handlePreview(file) {
        console.log(file);
      },
      // 處理超出圖片個(gè)數(shù)操作
      handleExceed(files, fileList) {
        this.$message.warning(`當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
      // 處理文件上傳操作
      handleFileUpload(file) {
      		this.loading = true;
          // 調(diào)用后端服務(wù)器的接口
      		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 實(shí)際結(jié)果如下圖所示：

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

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

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

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

或者

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

3.2 方式二：選擇圖片后手動(dòng)上傳

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

然后再添加一個(gè)手動(dòng)上傳的函數(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>點(diǎn)擊選取</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: [], //深拷貝，判斷重名及第一步時(shí)的文件信息展示
    };
}

methods: {
      // 處理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 處理預(yù)覽操作
      handlePreview(file) {
        console.log(file);
      },
      // 處理超出圖片個(gè)數(shù)操作
      handleExceed(files, fileList) {
        this.$message.warning(`當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
      // 處理文件上傳操作
      handleFileUpload(file) {
      		this.loading = true;
          // 調(diào)用后端服務(wù)器的接口
      		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 組件上傳整個(gè)文件夾。

只需要為 input 輸入框設(shè)置 webkitdirectory 屬性

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