zoukankan      html  css  js  c++  java
  • 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;
    
    }
    

      

  • 相关阅读:
    react方法传参的两种方式
    react引入本地图片和远程图片
    用yarn代替npm
    react生命周期
    react子传父
    react删除元素
    react遍历数组
    react监听input框里的值
    react创建组件的两种方式
    vue打包更改dist文件夹名称
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12308371.html
Copyright © 2011-2022 走看看