element-ui自定义文件上传

我不是女神ヾ 2023-02-19 07:29 5阅读 0赞

小哥今天心情好在抄一篇文章  
啦啦啦！  
**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()
      })