简介:如图 这个是最做好的样式图 , 支持文件件上传,大文件上传 可多个上传,可拖拽上传,下面详细讲解代码:
1,如图 第一步选择文件/选择文件件拿到对应的参数file,拿到后做一些处理数据的操作 如 maxSize限制文件的大小上传。
2,拿到file值后 点击开始上传 注意:这块核心代码 这个方法upload将拿file的参数上传到接口
const pendingFiles = computed(() =>
files.filter((f) => f.status === 'pending')
);
const upload = () => {
console.log(pendingFiles.value, 'pendingFiles.value');
pendingFiles.value.forEach((f) => {
console.log(f, 'ffff', f.abort);
f.status = 'uploading';
f.abort = uploadFile(
f.file,
(p) => {
f.progress = p;
},
(resp) => {
f.status = 'uploaded';
f.resp = resp;
}
);
});
};
3,该接口需要使用 new XMLHttpRequest()的方式去请求才能拿到 文件的上传进度 文件的总大小 拿到后进可以进行计算百分比如图
4,接口根据自己的需求传参
5,完整代码可关注我领取 谢谢!