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('文件个数超出限制')
    }
  }

上传时的参数