ElementUi 关于 el-upload的自定义上传（http-request）的使用

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

在这个例子中，我们使用了el-upload组件的:http-request属性来自定义上传的行为。我们创建了一个customRequest方法，这个方法接收一个options对象，它包含了上传所需的所有信息，包括文件内容。我们使用FormData来构建表单数据，并通过axios发送请求。成功上传后，我们调用options.onSuccess回调函数，处理错误时调用options.onError函数。这样就可以根据自己的业务需求来自定义上传的行为。