你瞅啥呢

2025-12-28 不能将类型“(options: any) => Promise<AxiosResponse<any, any> | undefined>”分配给类型“(option: RequestOption) => UploadRequest”。不能将类型“Promise<AxiosResponse<any, any> | undefined>”分配给类型“UploadRequest”。

报错代码为acro-design-vue的upload组件::custom-request="handleUpload"

报错内容为:

不能将类型“(options: any) => Promise<AxiosResponse<any, any> | undefined>”分配给类型“(option: RequestOption) => UploadRequest”。
不能将类型“Promise<AxiosResponse<any, any> | undefined>”分配给类型“UploadRequest”。
类型“Promise<AxiosResponse<any, any> | undefined>”中缺少类型“string”的索引签名。

报错原因:我自定义的handleUpload方法没有返回custom-request期望的对象,需要返回一个包含 abort 方法的对象给custom-request,而不是返回一个Promise!

你可以参考一下官方的写法:

<template>
  <a-upload :custom-request="customRequest" />
</template>

<script>
export default {
  setup() {
    const customRequest = (option) => {
      const {onProgress, onError, onSuccess, fileItem, name} = option
      const xhr = new XMLHttpRequest();
      if (xhr.upload) {
        xhr.upload.onprogress = function (event) {
          let percent;
          if (event.total > 0) {
            // 0 ~ 1
            percent = event.loaded / event.total;
          }
          onProgress(percent, event);
        };
      }
      xhr.onerror = function error(e) {
        onError(e);
      };
      xhr.onload = function onload() {
        if (xhr.status < 200 || xhr.status >= 300) {
          return onError(xhr.responseText);
        }
        onSuccess(xhr.response);
      };

      const formData = new FormData();
      formData.append(name || 'file', fileItem.file);
      xhr.open('post', '//upload-z2.qbox.me/', true);
      xhr.send(formData);

      return {
        abort() {
          xhr.abort()
        }
      }
    };

    return {
      customRequest
    }
  },
}
</script>

或者参考一下我的也行:

const handleUpload = (options: any) => {
    const { fileItem, onSuccess, onError, onProgress } = options;
    const file = fileItem.file;
    
    // 创建取消令牌
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    // 执行上传
    const formData: any = new FormData();
    formData.append('file', file);
    
    axios.post('接口', formData, {
        onUploadProgress: (progressEvent: any) => {
            if (progressEvent.total) {
                const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                onProgress?.(percent);
            }
        },
        cancelToken: source.token
    })
    .then(response => {


        onSuccess?.(response.data);
        Message.success('文件上传成功');
    })
    .catch(error => {
        if (!axios.isCancel(error)) {
            onError?.(error);
            Message.error(`上传失败: ${error.message || '未知错误'}`);
        }
    });
    
    // 同步返回包含 abort 方法的对象
    return {
        abort() {
            source.cancel('上传已取消');
        }
    };
};

 

posted @ 2025-12-29 00:00  叶乘风  阅读(4)  评论(0)    收藏  举报