vant weapp 多选上传图片_vue 中使用vant-ui van-uploader插件上传多张图片

html

script

export default {

name: "banner",

data(){

return{

realName:'',

phone:'',

imgHeader:'',

fileList: [],

mod_pic_one:'',

mod_pic_two:'',

mod_ping_img:'',

postData:[],

mod_pic_list:[],

mod_banner_name:''

}

},

props: ['refundImages'],

mounted(){

},

methods:{

delImg(index){

if(isNaN(index) || index>=this.postData.length){

return false;

}

let tmp = [];

for(let i=0,len = this.postData.length;i

if (this.postData[i] !== this.postData[index]) {

tmp.push(this.postData[i])

}

}

this.postData = tmp

},

afterZRead(file) {

// console.log(file);

// this.postData.push(file)

console.log(this.postData);

//此时可以自行将文件上传至服务器

let formData = new FormData();

formData.append("image",file.file);

// console.log(e.length)

// if(e && e.length){

// e.forEach(item =>{

// formData.append('image',this.postData)

// })

// }

// formData.append('image',this.postData);

// formData.append("image",e.file);

this.$httpUploaderService('/index/Other/upload_file',

formData

).then(res =>{

if(res.code=== 200){

console.log(res);

this.postData.push(res.data); //上传一张之后压入这个数组

for(var i=0;i

this.postData[i] = changeImgUrl(this.postData[i])

}

console.log(this.postData);

this.mod_pic_list.push(JSON.parse(JSON.stringify(res.data))); //深克隆数据列表会是元数据

console.log(this.mod_pic_list);

// this.mod_id_card_z = res.data;

Toast('上传图片成功')

}else{

Toast(res.msg)

}

})

},

backTo(){

this.$router.push("agentIndex")

},

xhrConfirm(){

// if(this.real_name === ""){

// Toast("请填写真实姓名");

// return;

// }

//

// this.$httpPostService('/admin/user/add_user',{

// username:this.real_name,

//

// }).then(res =>{

// console.log(res);

// this.$router.push("userList")

// })

}

},

components:{

"van-uploader":Uploader,

"van-button":Button,

"van-icon":Icon

}