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

html

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

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<len;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.length;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
}

来源：oschina

链接：https://my.oschina.net/pingheyongfeng/blog/3137217

标签

uploader

Vue.js

Vant