嗨,我是小路。今天主要和大家分享的主题是“vue3 封装上传图片组件”。是平常使用的一些项目,主要是在ant-design-vue框架下进行封装的上传图片组件。
一、主要属性
1.beforeUpload
定义:上传文件之前的钩子函数,当文件从本地上传选中之后,文件上传之前,会通过这个函数进行一系列的操作。如判断字符串的大小,文件类型,返回true则继续上传操作,返回false,则停止上传
const beforeUpload = (file) => {
//判断文件的大小,这里是kb,file.size/1024 = xM(M兆为单位),xM /1024 = yG(G为单位)
let size = file.size / 1024 / 1024
if (size > 1024) {
message.error('上传文件太大', 1.5,)
return false
}
let ext = file.name.split(".").pop()
if (!(ext == "jpg" || ext == "png")) {
message.error("只能上传jpg、png等图片格式文件")
} else {
}
return false;
}
2.customRequest
定义:自定义上传钩子函数,在执行完成beforeUpload返回true之后,继续执行customRequest指向的函数,如果beforeUpload返回false,则不执行customRequest的钩子。
3.fileList
定义:已经上传的文件列表,可执行设置。它是一个数组。多个文件以对象的形式存储。
4.onUploadProgress
定义:axios的进度条参数,可以在函数使用时,自定义进度条;可以监控整个文件上传的进度过程。直接返回百分比,值在0-1之间。
let formData = new FormData();
const uploadFile = ref([])
//上传的文件
formData.append("file", file.originFileObj);
//post上传
Http.post('/xxx/xxx/Upload', formData, {
onUploadProgress: e => {
if (e.upload) {
//监控文件的上传进度
uploadFile.value[i]['percent'] = e.progress.toFixed(2) * 100
}
}
}).then(data => {
if (data.Success) {
//返回上传的值 data,可以将data中的数据返回给指定的字段
} else {
message.error(`${data.Message}`)
}
})
二、实例代码
1、上传图片
一、组件在上传图片到服务器之前,先上传到列表,并判断文件是否满足制定条件。
二、点击开始上传按钮,图片开始上传图片,并将状态返回给列表。
三、点击确定,返回已经上传的组件。
const beforeUpload = (file) => {
let size = file.size / 1024 / 1024
if (size > 1024) {
message.error('上传文件太大', 1.5,)
return false
}
let ext = file.name.split(".").pop()
if (!(ext == "mp4" ) {
message.error("只能上传mp4、格式文件")
} else {
}
return false;
}
const customRequest = () => {
for (let i = 0; i < uploadFile.value.length; i++) {
uploading.value = true
//判断文件是否上传过,上传过了就不再上传
let file = uploadFile.value[i]
if (uploadArr.value.indexOf(file.uid) == -1) {
continue;
}
let formData = new FormData();
if (file.percent > 0) {
continue;
}
formData.append("file", file.originFileObj);
http.post('/xxx/xxx/Upload', formData, {
onUploadProgress: e => {
if (e.upload) {
uploadFile.value[i]['percent'] = e.progress.toFixed(2) * 100
}
}
}).then(data => {
if (data.Success) {
} else {
message.error(`${data.Message}`)
}
})
}
}
至于上传列表页面的展示效果,可以通过progress进行显示。
都看到这里了,记得【点赞】+【关注】哟。