elementUI el-upload的http-request的使用记录

<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>
export default {
  data() {
    return {
      uploadUrl: '/upload' // 服务器接收上传文件的URL
    };
  },
  methods: {
    uploadFile(request) {
      const formData = new FormData();
      formData.append('file', request.file); // 'file' 是服务器接收文件的字段名
 
      // 使用自定义的 HTTP 请求代替 ElementUI 的默认上传行为
      axios.post(this.uploadUrl, formData, {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            // 可以计算出已经上传的字节
            const percent = (progressEvent.loaded / progressEvent.total) * 100;
            // 更新el-upload的上传进度
            request.onProgress({ percent: Math.round(percent) });
          }
        },
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // 文件上传成功的回调
        request.onSuccess(response.data);
      })
      .catch(error => {
        // 文件上传失败的回调
        request.onError(error);
      });
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的响应
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 处理上传失败的错误
      console.error('Error uploading file:', err);
    }
  }
};
</script>

这段代码展示了如何使用 el-upload 组件的 :http-request 属性来实现自定义的文件上传请求。它使用 axios 发送 POST 请求，并处理进度更新和响应。这样做的好处是可以更灵活地处理文件上传的逻辑，包括添加额外的请求头、处理进度条更新等。