el-upload自定义上传http-request

在使用 Element UI 的 el-upload 组件时，可以通过 http-request 属性来自定义上传的行为。以下是一个简单的例子，展示了如何使用 axios 库来自定义上传请求：

<template>
  <el-upload
    :action="uploadUrl"
    :http-request="uploadFile"
    :on-success="handleSuccess"
    :on-error="handleError">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址'
    };
  },
  methods: {
    uploadFile(request) {
      const formData = new FormData();
      formData.append('file', request.file); // 这里的 'file' 是后端接收文件的字段名
 
      axios.post(this.uploadUrl, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        request.onSuccess(response.data);
      })
      .catch(error => {
        request.onError(error);
      });
    },
    handleSuccess(response, file, fileList) {
      // 成功处理逻辑
    },
    handleError(err, file, fileList) {
      // 错误处理逻辑
    }
  }
};
</script>

在这个例子中，我们定义了一个 uploadFile 方法，该方法接收一个对象 request，它包含了上传所需的 file（文件）、action（上传地址）、onError（错误处理函数）和 onSuccess（成功处理函数）。我们使用 axios 库来发送一个 POST 请求，并将文件作为 multipart/form-data 的一部分发送到服务器。服务器响应会在 then 方法中被处理，并调用 request.onSuccess 方法，若有错误则在 catch 方法中被处理，并调用 request.onError 方法。