ant design of vue3 文件上传(Upload),自定义customRequest

针对antd design of vue 中的upload组件实现自定义上传

1.总体实现(效果:在modal中实现上传效果,点击确认进行接口文件上传)

在这里插入图片描述

2.代码实现(效果:在modal中实现上传效果,点击确认进行接口文件上传)```

const customRequest = async (options) => {
const formdata = new FormData();
formdata.append("file", options.file);
formdata.append("sceneId", sceneId.value);

let progress = { percent: 1} //进度定义
let speed = 100/(options.file.size/65000) //上传速度

//控制进度条速度
const intervalId = setInterval(() => {
if (progress.percent < 99) {
  progress.percent+=speed
  options.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示
}else if (progress.percent==100 || progress.percent>100){
  //设置进度百分百
  progress.percent=100
  options.onProgress(progress) 
  //解决一直loading的问题(因为我这边没有进行接口请求,第一个参数,模拟接口请求成功返回)
  options.onSuccess({data:{},success:true},options.file)
  clearInterval(intervalId)
  emits('success',formdata)
  }
}, 50)
} 

3.官方参考链接

https://github.com/react-component/upload/blob/master/docs/examples/customRequest.tsx

4.参考文章

https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242 – 小黑小黑白

ant-design of vue 中的 a-upload 组件中,设置 `multiple` 属性为 `true` 可以支持上传多个文件。但是在上传多个文件时,如果要控制 `customRequest` 事件只触发一次,可以使用以下方式: 1. 在组件中设置 `beforeUpload` 属性为一个函数,在上传前对上传文件进行处理,将多个文件合并成一个文件对象,再将该文件对象作为参数传递给 `customRequest` 方法。 ``` <template> <a-upload :beforeUpload="beforeUpload" :customRequest="customRequest" multiple > <a-button icon="upload">Upload</a-button> </a-upload> </template> <script> export default { methods: { beforeUpload(fileList) { const file = new File([], 'multiple-files') fileList.forEach(f => { file.append(f.name, f) }) return file }, customRequest({ file, onProgress, onSuccess, onError }) { // handle upload logic here } } } </script> ``` 2. 在 `customRequest` 方法中判断当前上传的文件是否为最后一个文件,只有最后一个文件上传完成后,才调用 `onSuccess` 方法,表示整个上传过程完成。 ``` <template> <a-upload :customRequest="customRequest" multiple> <a-button icon="upload">Upload</a-button> </a-upload> </template> <script> export default { data() { return { fileList: [] } }, methods: { customRequest({ file, onProgress, onSuccess, onError }, fileList) { const isLastFile = fileList.indexOf(file) === fileList.length - 1 // handle upload logic here if (isLastFile) { onSuccess() } } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值