vue 中使用vant

Easter79
• 阅读 669

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
}
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
2年前
vue input复选框checkbox默认样式纯css修改
<divclass"data_list"vfor"(item,index)indata_list":key"index"<inputtype"checkbox"class"check_boxtuicheckbox":id"'id'item.id":value"item.id"vmodel
Stella981 Stella981
2年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
2年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意:三元运算符中暂时不支持点语法。如下:           <divclass"modalhidefade"id'myModa
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k