el-upload 不使用 action，降级处理，用其他方式做上传处理

使用 http-request，做上传处理

这是一个很简单的事情，我为什么单独拎出来说呢，因为我的同事，不会做降级处理，一根筋的只会用action，然后和后端说，上传后返回的 Content-type 不对，然后在那里吵架，叽里呱啦，说怎么别人可以用，你就用不了

这里写一个，不用 action 的示例

这里其他的具体不讲解，只讲http-request http-request 是饿了么 UI 库（Element Plus）中 <el-upload> 组件的一个属性，用于自定义文件上传的请求逻辑。以下是对 http-request 的详细讲解。

1. 功能

• 替代默认上传行为：http-request 允许开发者替代 <el-upload> 组件的默认上传逻辑，提供更灵活的上传方式，比如使用 axios、fetch 或其他 HTTP 客户端库。

2. 参数

http-request 接受一个函数，该函数的参数是一个对象，通常包含以下内容：

{
  file: File, // 上传的文件对象
  onSuccess: (response, file) => {}, // 上传成功的回调
  onError: (error, file) => {}, // 上传失败的回调
}

• file：待上传的文件对象。
• onSuccess：在上传成功时调用的回调函数，通常需要传入服务器的响应数据。
• onError：在上传失败时调用的回调函数，通常需要传入错误信息。

这里写一个完整的示例

<el-upload 
  v-model:file-list="fileList"
  :http-request="uploadSubmit"
  list-type="picture-card"
  show-file-list
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload" 
  :class="{disabled:uploadDisabled}">
  <el-icon>
    <Plus />
  </el-icon>
</el-upload>

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

const uploadSubmit = async (options: any) => {
  const { file, onSuccess, onError } = options;

  if (file.size > MAX_FILE_SIZE) {
    onError(new Error('文件大小超过限制，请上传小于5MB的图片'));
    return;
  }
  console.log(file);

  try {
    const formData = new FormData();
    formData.append('submit', file.name); // 图片名称
    formData.append('image', file); // 文件对象

    const response = await uploading(formData);
    if (response.status === 200) {
      // 处理响应

      response.data.text().then((text: any) => {
        const jsonData = JSON.parse(text);
        upload.value = jsonData.data;
        if (jsonData.code === 0) {
          ElMessage.success('图片上传成功！');
          onSuccess(jsonData.data);
        } else {
          ElMessage.error(jsonData.message);
          onError(new Error(jsonData.message));
        }
      });
    } else {
      throw new Error('上传失败: ' + response.statusText);
    }
  } catch (error) {
    onError(error);
    console.error('文件上传失败:', error);
    ElMessage.error('图片上传失败: ' + error.message);
  }
};

这里顺带写一下 用action的

如果后端已经配置好了，那这里就是无脑操作

uploadUrl就是你上传的接口，这里没什么好说的，就一个点token 要配置好

<el-upload
  name="image"
  class="avatar-uploader"
  :action="uploadUrl"
  :headers="myHeaders"
  :show-file-list="false"
  :before-upload="beforeUpload"
  accept="image/jpeg, image/png, image/svg+xml, image/gif"
  list-type="application/json, text/plain, */*">
    <img
      v-if="formData.logo"
      :src="formData.logo"
      class="avatar logo"/>
    <el-icon v-else class="avatar-uploader-icon bcd8 br50 logo">
      <User />
    </el-icon>
</el-upload>

const myHeaders = computed(() => {
  const user = localStorage.getItem("userInfo");
  const parsedUser = user ? JSON.parse(user) : {};
  return {
    token: parsedUser.token || "",
  };
});