多個文件上傳的核心就是將文件append進FormData的實例中，向后臺請求時將實例對象傳送過去。

頁面結構：

?多個文件上傳，傳送的數(shù)據(jù)：

先上代碼：

html部分：

<el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :on-change="handleChange"
          :on-remove="handleRemove"
          :file-list="fileList"
          :limit="3"
          :on-exceed="handleExceed"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交文件</el-button>
</el-upload>

js部分（this.$request是我自定義的請求方式，大家可以根據(jù)自身需要來調整）：

data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 文件狀態(tài)改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用
    handleChange(file, fileList) {
      // 對選中的文件做判斷
      if (file.raw.type !== 'text/plain') {
        this.$refs.upload.handleRemove(file)
        return
      }
      this.fileList = fileList
    },
    // 文件列表移除文件時的鉤子
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.fileList = fileList
    },
    // 文件超出個數(shù)限制時的鉤子
    handleExceed(files, fileList) {
      this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
    },
    // 提交文件
    submitUpload() {
      if (this.fileList.length !== 0) {
        const formData = new FormData()
        this.fileList.forEach((item, index) => {
          formData.append(`file${index + 1}`, item.raw)
          console.log(item.raw, item)
        })
        // 后端上傳接口
        this.MultipartFile(formData).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message({
          message: '提交文件數(shù)量不可為空',
          type: 'warning'
        })
      }
    },
    // 后端上傳接口
    MultipartFile(data) {
      return this.$request({
        url: 'https://jsonplaceholder.typicode.com/posts/',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上傳這一句必須加
        data
      })
    },
  }

?解析：

1.?我們想要的效果是手動一次性上傳多個文件，但是文件選取時，默認是自動上傳的，所以要設置不立即上傳

:auto-upload="false"

2.?由于我們想要上傳多個文件，必須自定義網(wǎng)絡請求中的一些內容，我們會在提交文件的時候手動發(fā)起網(wǎng)絡請求，所以將action設置為"",或者也看到一些文章設置為 # ,

action=""

3.?on-change 、?on-remove?和?on-exceed 鉤子函數(shù)，我們要在on-change 、?on-remove鉤子函數(shù)中存儲文件到數(shù)組中，在?on-exceed?鉤子函數(shù)中設置文件超出個數(shù)的處理，設置這個鉤子函數(shù)時，要設置限制文件個數(shù)，使用 limit 字段

很重要的一個地方就是對不符合條件的文件進行移除，我們不但不讓該文件存儲在文件數(shù)組里，而且還要從upload中刪除，不然的話，不符合條件的文件還是會在頁面上顯示的。例如，我們只想讓文件類型為 text/plain的文件保存并顯示在頁面中，但是我們不對頁面中顯示的文件做手動的刪除：

代碼：

handleChange(file, fileList) {
      console.log(file.raw.type)
      if (file.raw.type !== 'text/plain') {
        return
      }
      this.fileList = fileList
},

效果：不符合要求的docx結尾的文件也顯示在了頁面

所以，我們要手動的去刪除upload中的不符合條件的文件，核心代碼：

if (file.raw.type !== 'text/plain') {
    this.$refs.upload.handleRemove(file)
    return
}

效果（只有txt文件出現(xiàn)在頁面上）：

?

總的html部分：

:on-change="handleChange"
:on-remove="handleRemove"
:limit="3"
:on-exceed="handleExceed"

js部分：

    handleChange(file, fileList) {
      // 對選中的文件做判斷
      if (file.raw.type !== 'text/plain') {
        this.$refs.upload.handleRemove(file)
        return
      }
      this.fileList = fileList
    },

    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.fileList = fileList
    },

    handleExceed(files, fileList) {
      this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
    },

4.?提交文件

觸發(fā)提交文件函數(shù)后，可以先設置文件提交的一些要求，我設置的是有文件才能提交。。。

文件的提交要使用 FormData?構造函數(shù)來new一個實例，然后將文件數(shù)組中的文件都append到實例對象里邊

const formData = new FormData()
this.fileList.forEach(item => {
   formData.append('files', item.raw)
   console.log(item.raw, item)
})

append('請求接口時的參數(shù)','數(shù)據(jù)')

?5.?接下來就是調用接口傳輸數(shù)據(jù)了，一般向后端傳輸數(shù)據(jù)都是用的post，這里很重要的就是設置請求頭。

this.$request({
   url: 'https://jsonplaceholder.typicode.com/posts/',
   method: 'post',
   headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上傳這一句必須加
   data: 'form實例'
})

?差不多就是這樣了，有什么錯誤，留言改正。文章來源地址http://www.zghlxwxcb.cn/news/detail-841923.html

到了這里，關于vue結合element ui 實現(xiàn)多個文件上傳、并刪除不符合條件的的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！