Vant Uploader实现上传一张或多张图片组件
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
