快捷導(dǎo)航

elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過(guò)程)

更新時(shí)間：2022年11月11日 14:51:53 作者：讀秀

自定義上傳思路很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過(guò)程)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

簡(jiǎn)介：

自定義上傳文件并與其他參數(shù)一同提交到后臺(tái)(主要使用axios)

1.簡(jiǎn)單介紹組件（ upload）的屬性（熟悉參數(shù)的直接略過(guò)）

總結(jié)elmentUI一下它的使用和常用屬性的作用。

limit : 限制了上傳文件的個(gè)數(shù) ，如果你上傳單個(gè)文件這里設(shè)置 1 ，多個(gè)文件就別設(shè)置。

auto-upload:自動(dòng)上傳,在我看來(lái)，除非是單獨(dú)上傳文件時(shí),
這個(gè)屬性才有用,因?yàn)閱为?dú)文件直接上傳到后臺(tái)服務(wù)器。
而我們想要自己獲取到組件里的文件和其它表單數(shù)據(jù),再上傳,就需要?jiǎng)e的辦法,下面會(huì)講。

action:這個(gè)屬性是上傳文件的地址,當(dāng)我們指定了 auto-upload 屬性，
組件就會(huì)自動(dòng)按 action 的地址提交。我一般都不設(shè)置這個(gè)屬性：action="none",
因?yàn)槲矣X(jué)得自定義的更好,拓展性強(qiáng)。

multiple：這個(gè)屬性支持多文件上傳,如果你是上傳單文件這個(gè)屬性隨便設(shè)不設(shè)置，如果是多文件,就要設(shè)置,所以建議不動(dòng),因?yàn)樗J(rèn)開(kāi)啟。

accept：這個(gè)就不細(xì)說(shuō)了,限制類(lèi)型的,當(dāng)然僅限選擇時(shí)的類(lèi)型，用戶(hù)要是想上傳其它類(lèi)型的文件照樣有辦法。

2.主要目的自定義上傳文件

2.1 組件代碼

<el-upload class="upload"
                 ref="upload"
                 action="string"
                 :file-list="fileList"	//存放選擇的文件
                 :auto-upload="false"	//取消自動(dòng)上傳		
                 :http-request="uploadFile"		自定義上傳的方法
                 :on-change="handleChange"	//文件選擇后執(zhí)行的方法
                 :on-preview="handlePreview"	//點(diǎn)擊顯示文件（沒(méi)啥用）
                 :on-remove="handleRemove"	//移除文件
                 multiple="multiple">	
        <el-button slot="trigger"
                   size="small"
                   type="primary"
                   @click="delFile">選取文件</el-button>
      </el-upload>

2.2 data中的屬性

data(){
    return{
	// el-upload組件綁定的屬性—— :file-list=“fileList”,渲染后fileList[index]是Object類(lèi)型,而不是后臺(tái)所需的File類(lèi)型,
      // 而這個(gè)組件已經(jīng)把對(duì)應(yīng)的File類(lèi)型存儲(chǔ)到了fileList[index].raw這個(gè)屬性里,直接拿來(lái)用就好.
      fileList: [],
      // 不支持多選
      multiple: false,
      formData: "",
    }
}

2.3 methods的方法

    //點(diǎn)擊上傳文件觸發(fā)的額外事件,清空f(shuō)ileList
    delFile () {
      this.fileList = [];
    },
    handleChange (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定義上傳文件
    uploadFile (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //刪除文件
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 點(diǎn)擊文件
    handlePreview (file) {
      console.log(file);
    },

3.與其他參數(shù)通過(guò)axios提交到后臺(tái)

這里要使用到FormData()對(duì)文件進(jìn)行存儲(chǔ)才能提交到后臺(tái)

具體實(shí)現(xiàn)方式:

//準(zhǔn)備一個(gè)提交按鈕
<el-button type="primary"
                     @click="onSubmit">保存</el-button>

提交事件:

//保存按鈕
    onSubmit () {
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面數(shù)據(jù)是我自己設(shè)置的數(shù)據(jù),可自行添加數(shù)據(jù)到formData(使用鍵值對(duì)方式存儲(chǔ))
        formData.append("title", this.title);

axios異步提交:

注意：使用FormData提交文件只能使用post請(qǐng)求

在post請(qǐng)求體中需要設(shè)置 “Content-Type”:
“multipart/form-data;charset=utf-8”,提醒后臺(tái)數(shù)據(jù)是FormData類(lèi)型

axios.post(post請(qǐng)求的具體路徑, formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })

最后后臺(tái)數(shù)據(jù)的接收

注意：前臺(tái)傳送的是FormData數(shù)據(jù)，要拿到文件要使用@RequestParam(前端存放到formData的key)
MultipartFile file進(jìn)行接收

//采用PostMapping
    @PostMapping(具體路徑)
    public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {
       	//拿到具體文件 file
            return "SUCCESS";
    }

介紹到這就基本完成了elmentui的自定義上傳功能！