小程序使用vant组件uploader完成上传回显

**

一、限制个数为1：选择图片后先上传，后回显，具有删除功能

**
1.wxml

  <van-uploader file-list="{{ fileList }}" max-count="1" bind:after-read="afterRead" bind:delete="delete"
  />

2.js

data: {
    fileList: [], //需要上传图片的列表
  },
    
  afterRead(event) {
    const { file } = event.detail;
    console.log(event.detail);
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let that=this;
    wx.uploadFile({
      url:getApp().data.SERVER_URLx+"/api/post/upload/logo",
      method:'POST',
      header: {"Authorization":"Bearer "+app.globalData.token},
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        console.log(res);
        var result=JSON.parse(res.data);
        // 上传完成需要更新 fileList
        const { fileList = [] } = that.data;
        fileList.push({ ...file, url: result.data });
        that.setData({ fileList });
        that.setData({ companyLogo:result.data });
        console.log(fileList);
        console.log(that.data.companyLogo);
      },
      
    });
  },
  delete(event){
    console.log(event);
    let that=this;
    wx.request({
      url:getApp().data.SERVER_URLx+"/api/post/upload/logo",
      method:'DELETE',
      header: {
        //不加，无法传递参数至后台
        'content-type':'application/x-www-form-urlencoded',
        "Authorization":"Bearer "+app.globalData.token
      },
      data:{
        path:this.data.companyLogo
      },
      success:function(res){
        console.log(res);
        if(res.data.status==200&&res.data.data.isDelete){
          const { fileList = [] } = that.data;
          fileList.splice(event.detail.index, 1)
          that.setData({ fileList });
          Toast('删除logo成功');
        }else{
          Toast('删除当前logo失败');
        }
      }
 
    })
 
  },

3.效果

二、多图片：先选择图片，再回显，再用户确定后上传至服务器。

wx.uploadFile只支持单图片上传
1.wxml

    <view>
      <van-uploader 
      file-list="{{ fileList }}" 
      multiple="true" 
      bind:after-read="afterRead"
      max-count="6"
      bind:delete="deleteImage"
      />
      <!-- <van-button type="primary" bind:click="submitImage" block>提交图片</van-button> -->
    </view>

2.js

//new
submitImage(e){
  const { rentImgIdList = [] } = this.data;
  const { fileList = [] } = this.data;
  //const { fileUrlList = [] } = this.data;
  //filePath是String类型只能单个上传url
  let that=this;
  fileList.forEach(function(e){  
    // var url=e.url;
    // fileUrlList.push(url);
 
    wx.uploadFile({
      url:app.data.SERVER_URLx+"/api/rent/upload/img",
      method:'POST',
      filePath: e.url,
      name: 'files',
      header: {"Authorization":"Bearer "+app.globalData.token},
      formData: { user: 'test' },
      success(res) {
        console.log(res.data);
        var result=JSON.parse(res.data);
        if( result.status==200){
          console.log( result.data[0].rentImgId+"成功上传:"+ result.data[0].imgAddr);
          rentImgIdList.push(result.data[0].rentImgId);
 
        }else{
          console.log(result.status+"上传失败:"+ result.msg);
        }
 
      }
      ,fail(res){
        console.log("上传fail");
      },complete(res){
        console.log("上传complete");
      }
      
    });
 
  });
  that.setData({
    rentImgIdList:rentImgIdList
  });
  console.log("submit image");
  console.log("submit image finish");
},
deleteImage(event){
  console.log(event);
  let that=this;
        const { fileList = [] } = that.data;
        fileList.splice(event.detail.index, 1)
        that.setData({ fileList });
},
afterRead(event) {
  console.log(event.detail);
  const { file } = event.detail;
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      // 上传完成需要更新 fileList
      const { fileList = [] } = this.data;
      console.log(file);
      file.forEach(function(e){  
        fileList.push({ ...file,url:e.url });
      });
    
      this.setData({ fileList});
      console.log(this.data.fileList);
},

转载：https://blog.csdn.net/weixin_42477252/article/details/112679355