ant-design-vue customRequst

最新推荐文章于 2024-03-24 16:45:29 发布

易01

最新推荐文章于 2024-03-24 16:45:29 发布

阅读量944

点赞数

分类专栏： Vue TypeScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u012733501/article/details/126125352

版权

Vue 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

TypeScript

2 篇文章 0 订阅

订阅专栏

关于a-upload中customRequest

customRequest回调参数

onProgress: (event: { percent: number }): void
onError: (event: Error, body?: Object): void
onSuccess: (body: Object): void
data: Object
filename: String
file: File
withCredentials: Boolean
action: String
headers: Object

其中注意如果要改变上传文件的status，必须要执行onSuccess或者失败的onError，当然还有上传进度onProgress。不执行就会一直时uploading状态

React中customRequest 参考

template:

 <a-upload
     v-model:file-list="fileList"
     list-type="picture-card"
     :customRequest="customRequest"
      >
      
         <div v-if="fileList.length < 8">
               <plus-outlined />
          <div class="m-t-8">上传</div>
        </div>
 </a-upload>

ts:

 const formData = new FormData();
    formData.append("file", file);
    uploadFile(formData, {
        onUploadProgress: ({ total, loaded }: any) => {
            onProgress(
                { percent: Math.round((loaded / total) * 100).toFixed(2) },
                file
            );
        }
    })
        .then(res => {
            onSuccess(res);
        })
        .catch(error => {
            onError(error);
        });