element-ui自定义文件上传

小哥今天心情好在抄一篇文章
啦啦啦！
html
name上传文件参数名 files
data 上传参数

  <el-upload  ref="upload" name="files" :data="data" :on-error="onError"
    :on-success="uploadSuccess" :action="uploadUrl" :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  </el-upload>

方法

    /**
     * 自定义上传文件
     * @param fileList 文件列表
     * @param data 上传时附带的额外参数
     * @param action 上传的URL地址
     * @param success 成功回调
     * @param error 失败回调
     */
 uploadFiles({ uploadFiles, data, headers, action, success, error }) {
      let form = new FormData()
      // 文件对象
      uploadFiles.map(file => form.append('files', file.raw))
      // 附件参数
      for (let key in data) {
        form.append(key, data[key])
      }
      let xhr = new XMLHttpRequest()
      // 异步请求
      xhr.open('post', action, true)

      for (let item in headers) {
        if (headers.hasOwnProperty(item) && headers[item] !== null) {
          xhr.setRequestHeader(item, headers[item])
        }
      }

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            success && success(xhr.responseText)
          } else {
            error && error(xhr.status)
          }
        }
      }
      xhr.send(form)
    },
    
    // 上传失败
    onError() {
      console.log("保存失败")
    },
    // 上传成功
    uploadSuccess() {
      console.log("保存成功")
    }

调用

 let { uploadFiles, action, data, headers } = this.$refs.upload
 this.uploadFiles({
    uploadFiles,
    action,
    data,
    headers,
    success: () => this.uploadSuccess(),
    error: () => this.onError()
  })