<div class="">
<div class="">图片预览 禁止上传</div>
<van-uploader preview-size="60px" v-model="fileList" readonly :show-upload="false" :deletable="false" multiple></van-uploader>
</div>
<div class="">
<div class="">图片上传</div>
<van-uploader preview-size="60px" v-model="fileList2" :after-read="getImgCallback" multiple max-count="5"></van-uploader>
</div>
new Vue({
el: "#app",
data() {
return {
fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }, { url: "https://img01.yzcdn.cn/vant/tree.jpg" }],
fileList2: [],
};
},
methods: {
// 上传图片-单个上传回调
vantUpload(dataV) {
return axios({
method: "post",
headers: { "Content-Type": "multipart/form-data" },//重点--请求头
url: serviceUrl + "tftp/inserttftp",
data: dataV,
});
},
getImgCallback(fileData) {
fileData.status = "uploading"; //上传加载状态-加载中
var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
dataV.append("figuid", "3f3945ec-a60c-4769-9019-4f3b6dd001e8");
dataV.append("fType", "pzftptype");
dataV.append("fCtype", 1);
dataV.append("file", fileData.file);
this.vantUpload(dataV).then((res) => {
console.log(res);
if (res.data.result === 1) {
this.$toast.success(res.data.resultmsg);
fileData.status = "done"; //上传加载状态-完成
fileData.message = "上传成功";
} else {
console.log(res);
fileData.status = "failed"; //上传加载状态-失败
fileData.message = "上传失败";
}
});
},
},
});
vant官网:https://vant-contrib.gitee.io/vant/#/zh-CN/uploader
axios官网:http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE