微信小程序实现 带单选框 图片上传、预览、删除功能

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

功能图：

功能图：

.wxml:

 <!-- 上传图片功能 -->

<view class="uploader">
  <view class="uploader-text">相册</view>
  <view class="uploade-box">
    <!-- 上传成功的图片+单选框+删除按钮显示 -->
    <view class="uploader-showItem" wx:for="{{imagesList}}" wx:key="id">
      <!-- 图片 -->
      <view class="showItem-image" data-current="{{item.imagesObj.filePath}}" bindtap="previewImages">
        <image style="width:100%;height:100%" src="{{item.imagesObj.filePath}}"></image>
      </view>
      <!-- 删除按钮 -->
      <view class="showItem-icon-box" data-index="{{index}}" bindtap="deleteImages">
        <icon class="showItem-icon" type="clear" size="20" color="red"></icon>
      </view>
      <!-- 单选框 -->
      <radio-group class="radio-group" data-index="{{index}}" bindchange="handleRadio">
        <label class="checkbox">
            <radio checked="{{item.imagesObj.main_image}}"/><text>是否显示为主图</text>
          </label>
      </radio-group>
    </view>
    <!-- 上传按钮+框 -->
    <view class="uploader-btn" bindtap="uploaderImages">
      <view class="uploader-btn-icon"></view>
    </view>
  </view>
</view> 

.wxss:

 /* 上传图片功能  */
.uploader{
  width: 100%;
  display: flex;
  margin-top: 30rpx;
}
.uploader-text{ 
  margin-left:20rpx;
  min-width: 64rpx
}
.uploader-showItem{
  position: relative;
  margin-bottom: 20rpx;
}
.uploade-box{
  display: flex;
  flex-wrap:wrap;
  flex: 1;
}
 .showItem-image{
  width: 200rpx;
  height: 200rpx;
  border: 2rpx solid #d9d9d9;
  margin-left: 20rpx;
}
.showItem-icon-box{
  position: absolute;
  top: -1px;
  right: 1px;
  width: 28rpx;
  height: 28rpx;
  border-radius: 50rpx;
  background: #fff;
}
.showItem-icon{
  position: absolute;
  top: -4px;
  right: -4px;
}
.uploader .uploader-btn{
    width: 200rpx;
    height: 200rpx;
    border: 2rpx solid #d9d9d9;
    position: relative;
    margin-left: 20rpx;
}
.uploader-btn-icon:before {
  content: " ";
  position: absolute;
  width: 4rpx;
  height: 79rpx;
  top: 50%;
  left: 50%;
  /* -webkit-transform: translate(-50%, -50%);*/ 
  transform: translate(-50%, -50%); 
  background-color: #d9d9d9;
}
.uploader-btn-icon:after {
  content: " ";
  position: absolute;
  height: 4rpx;
  width: 79rpx;
  top: 50%;
  left: 50%;
  /* -webkit-transform: translate(-50%, -50%);*/
  transform: translate(-50%, -50%); 
  background-color: #d9d9d9;
}
.checkbox{
  font-size: 20rpx;
}
radio{
  transform:scale(0.7);
}

.js:

//获取应用实例
const app = getApp()
 
Page({
  data: {
    imagesList:[],
  },
 
  onLoad: function() {
  },


  //单选框（遍历imagesList,如果有一个main_image为true,所有都置为false）
  handleRadio(e){
    let index = e.currentTarget.dataset.index
    this.data.imagesList.map((v,i)=>{
      if(index==i){
        v.imagesObj.main_image = true
      }else{
        v.imagesObj.main_image = false
      }
    })
    this.setData({  //map()不改变原数组,所以得再赋一次值
      imagesList:this.data.imagesList
    })
  },
  //图片预览
  previewImages(e){
    let current = e.currentTarget.dataset.current
    let urls = []
    this.data.imagesList.map(v=>{
      urls.push(v.imagesObj.filePath)
    })
    wx.previewImage({
      current, // 当前显示图片的http链接
      urls// 需要预览的图片http链接列表
    })
  },
  //删除图片
  deleteImages(e){
    let index = e.currentTarget.dataset.index
    this.data.imagesList.splice(index,1)
    this.setData({ 
      imagesList:this.data.imagesList
    })
  }, 
  //上传图片
  uploaderImages(){
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], //所选的图片的尺寸(默认：'原图','压缩图')
      sourceType: ['album', 'camera'],  //选择图片的来源(默认：'从相册选图','使用相机')
      success (res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://malltest.daxinbuye.com:9000/api/rivalGoods/file/upload.do', //这是博主的后端接口，可以测试，勾选不校验合法域名...  就行
          filePath: tempFilePaths[0],
          name: 'file',
          // formData: { //可携带参数
          //   'user': 'test'
          // },
          success (res){
            /* 返回的是json格式,使用 JSON.parse(）转为我们要的对象,上传的成功后提取所需字段封装成新数组imagesList */ 
            let imagesObj = {
              filePath:tempFilePaths[0],
              id:JSON.parse(res.data).data.id,
              main_image:false,
            } 
            that.data.imagesList.push({imagesObj})
            that.setData({
              imagesList:that.data.imagesList
            })
          }
        })
      }
    })
  }
 
  
})