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"
>
</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>