本文实例为大家分享了Vant Uploader实现上传一张或多张图片组件,供大家参考,具体内容如下 html部分 <template> <div class
本文实例为大家分享了Vant Uploader实现上传一张或多张图片组件,供大家参考,具体内容如下
html部分
<template>
<div class="contWrap">
<van-uploader
v-model="fileList"
:multiple="true"
:before-read="beforeRead"
:after-read="afterRead"
:before-delete="delUploadImg"
upload-icon="plus"
>
<!-- 注:这里是自定义上传样式 -->
<!-- <p>
<van-icon
name="plus"
color="#07c160"
size=".5rem"
/>
上传照片
</p> -->
</van-uploader>
</div>
</template>
js部分
<script>
import axiOS from "axios";
export default {
name: "uploadImages",
data() {
return {
fileList: [],
uploadUrl: "/api/upload/fileUpload",
headers: {
token: this.$store.state.account.token,
},
};
},
methods: {
// 返回布尔值
beforeRead(file) {
if (file instanceof Array) {
//判断是否是数组
file.forEach((v) => {
this.checkFile(v);
});
} else {
this.checkFile(file);
}
return true;
},
//图片类型检查
checkFile(file) {
const fORMat = ["jpg", "png", "jpeg"];
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
if (!format.includes(finalName.toLowerCase())) {
Toast("请上传" + format.join(",") + "格式图片");
return false;
}
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
if (file instanceof Array) {
file.map((v) => {
v.status = "uploading";
v.message = "上传中...";
this.uploadImg(v);
});
} else {
file.status = "uploading";
file.message = "上传中...";
this.uploadImg(file);
}
},
//上传
uploadImg(file) {
const formData = new FormData();
formData.append("file", file.file);
axios
.post(this.uploadUrl, formData, {
headers: this.headers,
})
.then((res) => {
if (res.data) {
if (file instanceof Array) {
//判断是否是数组
file.map((v, i) => {
v.status = "success";
v.message = "";
v.url = res.data[i];
});
} else {
file.status = "success";
file.message = "";
file.url = res.data.uploadUrl;
}
}
})
.catch((err) => {
this.$notify({
type: "warning",
message: "上传失败",
});
});
},
//删除
delUploadImg(item) {
this.fileList = this.fileList.filter((v) => v.url != item.url);
}
},
};
</script>
--结束END--
本文标题: Vant Uploader实现上传一张或多张图片组件
本文链接: https://www.lsjlt.com/news/135712.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0