element-ui+vue單文件上傳和 多文件批量上傳（多文件走一個接口）

**

單文件上傳

**

html

<el-upload
                ref="upload"
                class="upload-demo"
                action="接口地址"
                :data="voiceMeta.uploadParams"
                :on-change="handleFileChange"
                :on-remove="handleFileRemove"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUploadFile"
                :multiple="false"
                :file-list="voiceMeta.fileList"
                :auto-upload="false"
                :headers="header"
                accept=".MP3, .mp3, .wav, .WAV"
              >
                <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>

data

 header: { 'X-Token': getToken() },
 //getToken()方法自己寫

methods

    handleFileChange(file, fileList) {
      console.log('文件改變')
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    handleFileRemove(file, fileList) {
      console.log('文件移除')
    },

    uploadSuccess(response, file, fileList) {
      console.log('上傳成功')
      console.log(response)
      if (response.success) {
        this.voiceMeta.fileurl = response.url
        this.$message({
          message: '文件上傳成功',
          type: 'success'
        })
        console.log(this.voiceMeta.fileurl)
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error('文件上傳失敗：' + err.toString())
    },
    beforeUploadFile(file) {
      const temp = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (temp !== 'mp3' && temp !== 'wav' && temp !== 'MP3' && temp !== 'WAV') {
        this.$message({
          message: '當前文件格式不符合要求',
          type: 'error'
        })
        return false
      }
      if (!file) {
        this.$message({
          message: '請選擇要上傳的文件',
          type: 'error'
        })
        return false
      }
      if (file.size / 1024 / 1024 > 20) {
        this.$message({
          message: '文件大小不能超過20M',
          type: 'error'
        })
        return false
      }
    },
    submitUpload() {
      this.$refs.upload.submit()
    }

上傳參數（流）

**

多文件批量上傳走一個接口

**
html

<el-form ref="multi-upload-form" :model="multiUpload" label-width="80px" class="form-container">
                  <el-form-item label="批量導入">
                    <el-upload
                      action="#"
                      :show-file-list="true"
                      :on-remove="removeFile"
                      :multiple="true"
                      :file-list="fileList"
                      :on-change="handleChange"
                      :auto-upload="false"
                      :limit="2"
                      :on-exceed="handleExceed"
                      accept=".MP3, .mp3, .wav, .WAV"
                    >
                      <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
                      <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFile">上傳到服務器</el-button>
                      <div slot="tip" class="el-upload__tip">文件不宜超過200條</div>
                    </el-upload>
                  </el-form-item>
                </el-form>

js

 data() {
    return {
      fileList: []
    }
  },
 methods: {
    // 選擇文件時，往fileList裏添加
    handleChange(fileList) {
      this.fileList.push(fileList)
    },
    // 移除文件
    removeFile(file) {
      // 移除文件時，要重新給fileList賦值
      const arr = []
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid !== file.uid) {
          arr.push(this.fileList[i])
        }
      }
      this.fileList = arr
    },
    // 手動文件上傳
    uploadFile() {
      if (this.fileList.length === 0) {
        this.$message.warning('請選取文件')
        return
      }
      const formData = new FormData()
      // 因爲要傳一個文件數組過去，所以要循環append
      this.fileList.forEach((file) => {
        formData.append('files', file.raw)
      })
      // batchUploadFile是我自己定義的接口
      batchUploadFile(formData).then(res => {
        if (res.success) {
          // 上傳成功的操作
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.fileList = []
      })
    },
    // 上傳文件超出個數
    handleExceed(files, fileList) {
      this.$message.warning('文件個數超出限制')
    }
  }

上傳時的參數