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

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

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

簡介：

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

1.簡單介紹組件（ upload）的屬性（熟悉參數的直接略過）

總結elmentUI一下它的使用和常用屬性的作用。

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

auto-upload:自動上傳,在我看來，除非是單獨上傳文件時,
這個屬性才有用,因為單獨文件直接上傳到后臺服務器。
而我們想要自己獲取到組件里的文件和其它表單數據,再上傳,就需要別的辦法,下面會講。

action:這個屬性是上傳文件的地址,當我們指定了 auto-upload 屬性，
組件就會自動按 action 的地址提交。我一般都不設置這個屬性：action="none",
因為我覺得自定義的更好,拓展性強。

multiple：這個屬性支持多文件上傳,如果你是上傳單文件這個屬性隨便設不設置，如果是多文件,就要設置,所以建議不動,因為它默認開啟。

accept：這個就不細說了,限制類型的,當然僅限選擇時的類型，用戶要是想上傳其它類型的文件照樣有辦法。

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

2.1 組件代碼

<el-upload class="upload"
                 ref="upload"
                 action="string"
                 :file-list="fileList"	//存放選擇的文件
                 :auto-upload="false"	//取消自動上傳		
                 :http-request="uploadFile"		自定義上傳的方法
                 :on-change="handleChange"	//文件選擇后執(zhí)行的方法
                 :on-preview="handlePreview"	//點擊顯示文件（沒啥用）
                 :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類型,而不是后臺所需的File類型,
      // 而這個組件已經把對應的File類型存儲到了fileList[index].raw這個屬性里,直接拿來用就好.
      fileList: [],
      // 不支持多選
      multiple: false,
      formData: "",
    }
}

2.3 methods的方法

    //點擊上傳文件觸發(fā)的額外事件,清空fileList
    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);
    },
    // 點擊文件
    handlePreview (file) {
      console.log(file);
    },

3.與其他參數通過axios提交到后臺

這里要使用到FormData()對文件進行存儲才能提交到后臺

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

//準備一個提交按鈕
<el-button type="primary"
                     @click="onSubmit">保存</el-button>

提交事件:

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

axios異步提交:

注意：使用FormData提交文件只能使用post請求

在post請求體中需要設置 “Content-Type”:
“multipart/form-data;charset=utf-8”,提醒后臺數據是FormData類型

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

最后后臺數據的接收

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

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

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