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

Posted on by

簡介：

自定義上傳文件並與其他參數一同提交到後臺(主要使用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"	//文件選擇後執行的方法
                 :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的方法

    //點擊上傳文件觸發的額外事件,清空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()對文件進行存儲才能提交到後臺

具體實現方式:

//準備一個提交按鈕
<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的自定義上傳功能！

總結

到此這篇關於elementUI自定義上傳文件功能實現的文章就介紹到這瞭,更多相關elementUI自定義上傳文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：