vue 中使用vant

html

1<!--TODO 这是上传多张图-->
2    <div class="ver-code-bottom-one-right-code">
3      <div class="posting-uploader-item" v-for="(item,index) in postData" :key="index">
4        <img :src="item"  alt="图片" class="imgPreview">
5        <van-icon name="close" @click="delImg(index)" class="delte"/>
6      </div>
7      <van-uploader  :after-read="afterZRead" :accept="'image/*'" v-show="postData.length<=1" />
8    </div>

script

1export default {
2name: "banner",
3data(){
4  return{
5
6    realName:'',
7    phone:'',
8    imgHeader:'',
9    fileList: [],
10    mod_pic_one:'',
11    mod_pic_two:'',
12    mod_ping_img:'',
13    postData:[],
14    mod_pic_list:[],
15    mod_banner_name:''
16
17
18  }
19},
20props: ['refundImages'],
21mounted(){
22
23},
24methods:{
25  delImg(index){
26    if(isNaN(index) || index>=this.postData.length){
27      return false;
28    }
29    let tmp = [];
30    for(let i=0,len = this.postData.length;i<len;i++){
31      if (this.postData[i] !== this.postData[index]) {
32        tmp.push(this.postData[i])
33      }
34    }
35    this.postData = tmp
36  },
37
38  afterZRead(file) {
39    // console.log(file);
40      // this.postData.push(file)
41    console.log(this.postData);
42    //此时可以自行将文件上传至服务器
43    let formData = new FormData();
44    formData.append("image",file.file);
45
46    // console.log(e.length)
47    // if(e && e.length){
48    //   e.forEach(item =>{
49    //     formData.append('image',this.postData)
50    //   })
51    // }
52    // formData.append('image',this.postData);
53
54    // formData.append("image",e.file);
55    this.$httpUploaderService('/index/Other/upload_file',
56      formData
57    ).then(res =>{
58
59      if(res.code=== 200){
60        console.log(res);
61        this.postData.push(res.data); //上传一张之后压入这个数组
62        for(var i=0;i<this.postData.length;i++){
63          this.postData[i] = changeImgUrl(this.postData[i])
64        }
65        console.log(this.postData);
66        this.mod_pic_list.push(JSON.parse(JSON.stringify(res.data))); //深克隆数据列表会是元数据
67        console.log(this.mod_pic_list);
68        // this.mod_id_card_z = res.data;
69        Toast('上传图片成功')
70
71      }else{
72        Toast(res.msg)
73      }
74
75    })
76  },
77  backTo(){
78    this.$router.push("agentIndex")
79  },
80  xhrConfirm(){
81    // if(this.real_name === ""){
82    //   Toast("请填写真实姓名");
83    //   return;
84    // }
85    //
86
87    // this.$httpPostService('/admin/user/add_user',{
88    //   username:this.real_name,
89    //
90    // }).then(res =>{
91    //   console.log(res);
92    //   this.$router.push("userList")
93    // })
94  }
95
96},
97components:{
98  "van-uploader":Uploader,
99  "van-button":Button,
100  "van-icon":Icon
101}