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


    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) { }  
                })  
              }  
            });  
    
    
        }
       })
    },
  • 相关阅读:
    UITableView 总结
    关于UIView的autoresizingMask属性的研究
    支付开发
    202011.11
    202011.10
    202011.09
    养成一个习惯,每天写博客,不放假就不变
    html重置功能
    echart折线图插件图片的宽度和页面的自适应
    点击使文字变文本框且可编辑的JS
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15048324.html
Copyright © 2020-2023  润新知