小程序图片选择,小程序图片上传及调用后台接口上传

wml

<view class="photoCon" bindtap='uploader'>
       <view class="phontoBox">
         <view class="phontoBox-img">
          <image src="{{headImg}}" class="slide-image" mode="widthFix" />
         </view>
         <view class="photoCamire">
            <image src="https://img.jd9sj.com/info-phonto.png" class="slide-image" mode="widthFix" />
         </view>
       </view>

    </view>

js

uploader(){
  let that=this
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
      const tempFilePaths = res.tempFilePaths
      //启动上传等待中...  
      wx.showToast({  
        title: '正在上传...',  
        icon: 'loading',  
        mask: true,  
        duration: 10000  
      })  
      let access_token =  wx.getStorageSync("cookie") 
        wx.uploadFile({  
          url: app.globalData.host+'/uploadHeader',   //后台接口名
          filePath: tempFilePaths[0],  
          name: 'file', 
 //后台字段名为为file 的name传file(根据后台定义的入参)
          header: {  
            "Content-type": "multipart/form-data",
            "cookie":access_token  //权限否则401
          },  
          success: function (res) {
            if (res.statusCode == 200) {        
              console.log(JSON.parse(res.data).data)        
            }
            that.setData({  
              headImg: JSON.parse(res.data).data  
            });  
            that.saveInfor(3)
    
          },  
          fail: function (res) {  
            wx.hideToast();  
            wx.showModal({  
              title: '错误提示',  
              content: '上传图片失败',  
              showCancel: false,  
              success: function (res) { }  
            })  
          }  
        });  


    }
   })
},
原文地址:https://www.cnblogs.com/shuihanxiao/p/15048324.html