微信小程序如何上传图片

微信小程序上传图片，并预览

<image src="{{tempFilePaths[0]}}"></image>
<form bindsubmit="radioselect">
    <!-- <radio-group bindchange="radioselect"> -->
        <radio-group name="cat_name">
        <view wx:for="{{items}}" wx:key="item">
        <radio value = "{{item.value}}" checked="checked"></radio>
        <view>{{item.name}}</view>
        </view>
    </radio-group>
    <input class='input-radius' focus="true" type = "text" confirm-type="done" value = "" name = "cats_name" bindconfirm = "up" placeholder="请输入衣服名称" />
    <button form-type="submit" plain="true">提交</button>
</form>
<button form-type="submit" bindtap="upimg" class='jia_img' plain="true" size="default">上传</button>
<!-- 请重新提交表单信息 -->
<view>{{errradioselect}}</view>
<!-- 提交衣服种类信息 -->
<view>{{usercloth.cat_name}}:{{usercloth.cats_name}}</view>
<!-- 上传成功提示信息 -->
<view>{{tips}}</view>

Page({
  data: {
    tempFilePaths: [],
    tips:"",
    items: [
      {value: '无分类', name: '无分类'},
      {value: '上衣', name: '上衣', checked: 'true'},
      {value: '下装', name: '下装'},
      {value: '鞋子', name: '鞋子'} ],
      usercloth:"",
      errradioselect:""
  },
  //上传图片
  upimg() {
    var that = this;
    // 显示操作菜单
    wx.showActionSheet({
      itemList: ['拍照', '从相册中选择'],
      success(res) {
        console.log(res.tapIndex)
        if (res.tapIndex == 0) { //0是拍照
          wx.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['camera'],
            success: function(res) {
              //res.tempFilePaths[0] 这个是图片
              var tempFilePaths = res.tempFilePaths ;//图片
              var tips ="上传图片成功" ;
              that.setData({
                tempFilePaths: tempFilePaths,
                tips
              })
              that.up()
            },
          })
        } else if (res.tapIndex == 1) {
          wx.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album'],
            success: function(res) {
              //res.tempFilePaths[0] 这个是图片
              var tempFilePaths = res.tempFilePaths //图片
              var tips ="上传图片成功" ;
              that.setData({
                tempFilePaths: tempFilePaths,
                tips
              })
              that.up()
            },
          })
        }
      }
    })
  },
  //提交衣服信息
  radioselect(e){
    const usercloth = e.detail.value;
    console.log(usercloth)
    var user_cats_name = usercloth.cats_name
    if(user_cats_name ==''){
      wx: wx.showToast({
        title: '请重新提交',
        icon:"error",
        success:res =>{
          var res = "请填写完整信息";
          this.setData({
            errradioselect:res
          })
        }
      })
    }else{
        this.setData({
          usercloth:usercloth
        })
        wx: wx.showToast({
          title: '请上传图片'
        })
        wx.request({
          url: '', //提交衣服种类路径
          method:'GET',
          data:{usercloth:e.detail.value},
          header: {
            'content-type': 'application/json' // 默认值
          },
          success (res) {
            // console.log(res.data)
          }
        })}
  },
  //提交数据
  up() {
    console.log("this",this.data)
    var usercloth = this.data.usercloth
    // console.log(usercloth)
    var openid = wx.getStorageSync('openid')
    // console.log(openid)
    var tempFilePaths = this.data.tempFilePaths;
    // console.log("tempFilePaths"+tempFilePaths)
    wx.getFileSystemManager().readFile({
      filePath:tempFilePaths[0],
      encoding:'base64',
      success:res =>{
        // console.log('data:image/png;base64,' + res.data)
        // console.log(res.data)
        var tempFilePathss = 'data:image/png;base64,' + res.data
        // var tempFilePathss = res.data
        // console.log("tempFilePathss",tempFilePathss)
        var img_data = tempFilePathss
        // const add = [];
        // add.img_data = img_data;
        // add.usercloth = usercloth
        usercloth.img_data= img_data
        usercloth.openid = openid
        console.log(usercloth)
        // console.log("img_data",img_data)
        wx.request({
          url: 'https://qc3752.api.cloudendpoint.cn/addimg', //添加衣服页面路径
          data:usercloth,
          method:'post',
          success: function(res) {
            console.log(res)
          },
          // fail(res) {
          //   console.log(res)
          // }
        })
      }
    })
  }
})

/* pages/add/add.wxss */
button{
    margin-top: 50rpx;
}
image{
    border:#FBD2D6 solid 2.0rpx;
    margin-left: 50rpx;
    margin-top: 50rpx;
}
radio-group{
    margin-left: 60rpx;
    display:flex;
    text-align: center;
}
radio{
    width:100rpx;
}
.input-radius{
    border-radius: 30rpx;
    margin: 10rpx 0 50rpx 30rpx;
    width: 450rpx;
    background-color: #FBD2D6;
    height:70rpx;
  }