微信小程序wx.uploadFile回显删除上传

1.CSS

.add_pic {
  padding: 0 40rpx;
  background: #fff;
}

.add_pic view {
  display: inline-block;
  margin-top: 20rpx;
  width: 430rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background: url(https://avatar) no-repeat left center;
  background-size: 160rpx auto;
  padding-left: 80rpx;
  color: #b2b2b2;
}
.add_pic .code {
  display: inline-block;
  margin-top: 20rpx;
  width: 430rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background: url(https://avatar) no-repeat left center;
  background-size: 160rpx auto;
  padding-left: 130rpx;
  color: #b2b2b2;
}
.picPre {
  width: 50%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.picPre image {
  width: 100%;
  height: 180rpx;
}

.picPre view {
  position: absolute;
  right: 0px;
  top: -20rpx;
  width: 15px;
  height: 15px;
  background: url(https://avatar) no-repeat;
  background-size: cover;
}
.image_box {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 10px 0 10rpx;
}

2.回显删除js

  //
  //上传图片
  uploadPic: function () {//选择图标
    let that=this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], //压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          isSrc: true,
          src: tempFilePaths
        })
      }
    })
  },

  //删除图片
  clearPic: function () {//删除图片
    let that=this;
    that.setData({
      isSrc: false,
      src: ""
    })
  },
  

3.上传部分需要修改

 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);
      },
      
    });
  },

4.WXML

  <view class="add_pic" bindtap="uploadPic" wx-if="{{!isSrc}}">
      <view>添加图片（选）</view>
    </view>
    <view wx:if="{{isSrc}}" class="image_box">
      <view class="picPre">
        <image src="{{src}}" mode="aspectFit"></image>
        <view bindtap="clearPic">x</view>
      </view>
    </view>

效果图