• vant upload图片上传 (file文件)


        
    <div class="upload-img">
      <div class="img-box" v-for="(item,index) in uploadImages" :key="index">
        <img class="image" :src="item">
      </div>
      <!-- vant的upload组件 -->
      <van-uploader :after-read="onRead" accept="image/*" style=" 88px;height:88px;">
        <img src="../../static/img/evaluate.png" style=" 100%;height: 100%;">
      </van-uploader>
    </div>
    
    
    
    data() {
      uploadImages:[],
    };
    
    
    
    onRead(file) {
      console.log(file);//file文件如下图
       var formData = new FormData(); //构造一个 FormData,把后台需要发送的参数添加
      formData.append('file', file.file); //接口需要传的参数
      this.$upload('/single/single/upload', formData).then(res => {//将formDate文件上传到阿里云服务器,会返回图片地址
        console.log(res,111111);
        let str = res.response_data[0];
        this.uploadImages.push(str);//将图片地址存入一个数组中
      });
    },
    .upload-img{
      display: flex;
      flex-wrap: wrap;
    }
    .img-box{
       88px;
      height: 88px;
      margin-right: 8px;
      margin-bottom: 8px;
    }
    
    .image{
       88px;
      height: 88px;
    
    }
    

      

  • 相关阅读:
    面试题_day0212
    面试题_day0211
    猫眼的数字解密
    缺口验证码
    mysql替换字段里面的内容
    mysql重复id删除
    追踪你的女朋友。
    淘宝登录验证
    jadx-gui-1.0.0.jar怎么运行?
    Python实现一个进度条
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12308371.html
Copyright © 2020-2023  润新知