公告列表
公告列表
收藏
评论

小程序选择图片上传base64格式给后端

小程序选择图片上传base64格式给后端。

1 、在wxml，创建节点


<canvas canvas-id='myCanvas' style='width:{{imgWidth}}px;height:{{imgHeight}}px;'></canvas>

<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" bindtap="chooseImage" data-id="myCanvas">

   <view class="weui-cell__bd">选择图片</view>
   <view class="weui-cell__ft weui-cell__ft_in-access">
      <image src='{{canvasImg}}' style='width:50px;height:50px;'></image>
   </view>
</view>



2、在js，编写逻辑

chooseImage:function(){
    var self = this;
    var canvasId = e.currentTarget.dataset.id;
    console.log("canvasId==>", canvasId)
    var newDate = new Date();
    var year = newDate.getFullYear();
    var month = newDate.getMonth() + 1;
    var date = newDate.getDate();
    var str = year + "-" + month + "-" + date;
 
    wx.chooseImage({
      count: 1,
      success: function(res) {
        console.log("wx.chooseImage res=>", res);
        var imgUrls = res.tempFilePaths;
        wx.getImageInfo({
          src: imgUrls[0],
          success: function(res) {
            console.log('wx.getImageInfo res=>', res);
 
            let imgWidth = res.width;
            let imgHeight = res.height;
            let imgName = str + "-" + res.path.slice(-20);
 
            if (imgWidth >= 2000) {
              imgWidth = imgWidth / 2;
              imgHeight = imgHeight / 2;
            }
 
            self.setData({
              imgWidth: imgWidth,
              imgHeight: imgHeight,
            });
 
 
            setTimeout(() => {
              self.createCanvas(imgUrls, imgWidth, imgHeight, canvasId, imgName);
            }, 100);
 
          }
        })
      }
    });
},
createCanvas: function(imgUrls, imgWidth, imgHeight, canvasId, imgName) {
     
    var self = this;
 
    var ctx = wx.createCanvasContext(canvasId);
    ctx.drawImage(imgUrls[0], 0, 0, imgWidth, imgHeight);
 
    wx.showLoading({
      title: '上传中',
    })
 
    ctx.draw(false, () => {
      wx.hideLoading();
      wx.canvasGetImageData({
        canvasId: canvasId,
        x: 0,
        y: 0,
        width: imgWidth,
        height: imgHeight,
        success: res => {
          // wx.hideLoading();
          // 3. png编码
          let pngData = upng.encode([res.data.buffer], res.width, res.height)
          // 4. base64编码
          let base64 = wx.arrayBufferToBase64(pngData)
          let base64Data = 'data:image/jpeg;base64,' + base64;
          console.log('base64Data=>', base64Data);
         
          self.addImageFile(base64Data, canvasId, imgName);
        },
        fail(err) {
          wx.hideLoading();
          console.log(err)
        },
      })
    });
  },
  addImageFile: function(base64Data, canvasId, imgName) {
    var self = this;
 
    let url = "api/uploadImg.do";
    let ticket = wx.getStorageSync('ticket') || "";
 
    let data = {
      "ticket": ticket,
      "base64Data": encodeURIComponent(base64Data),
      "imgName": imgName
    }
 
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: data,
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: "POST",
      success: function(res) {
        let data = res.data;
        wx.hideLoading();
      },
      fail: function(err) {
        wx.hideLoading();
 
      }
    });
 
  },


3.page 里面要引入

const upng = require("./UPNG.js");


在upng.js里面要引入pako.min.js


具体的可github搜索查找。




4、根据小程序前端转base64给后端的过程中，小程序会出现奔溃，延时长的情况，因为转base64比较耗时间，实际开发中还是建议让后端去转，使用api接口

wx.uploadFile(OBJECT)


但有需要的也可以了解下该方法


最后一次编辑于  2018-09-11
收藏

3 个评论

  • Azi
    Azi
    2019-06-11

    你把图片不经过处理存入数据库试试


    2019-06-11
    赞同
    回复
  • 文
    文
    2018-10-15

    你这个太麻烦了，看看这个https://developers.weixin.qq.com/community/develop/doc/0002ea9b7b4c70d6b24751e1457804

    2018-10-15
    赞同
    回复
  • 总之随便啦
    总之随便啦
    2018-09-28

    我先知道为什么上传图片要转base64，直接以上传文件的形式上传不就好了吗

    2018-09-28
    赞同
    回复 3
    • 同步
      同步
      2018-09-28

      是的，只是看后端应用了什么框架，在第三方框架中，后端使用什么形式处理是最快的。因此后端会提出前端以base64格式的需求。

      而前端如果无法完成，或不知道这种方法，就有可能僵持在这里了。

      2018-09-28
      赞
      回复
    • 总之随便啦
      总之随便啦
      2018-09-28回复同步

      那我还想再问一下上传文件时，比如图片，我们有时同时会发送一些附带的数据，是不是只做了一次http请求，还是框架封装好了其实是做了两次，疑惑的原因是我在网上找我上面的问题时很多人说是转码是为了节省一次http请求（这样参数就直接写在地址里了），但我自己也只在网络框架里（如小程序，OKhttp之类的）发了一次请求

      2018-09-28
      赞
      回复
    • 同步
      同步
      2018-09-28回复总之随便啦

      你说的这个http请求数，我也没有答案

      2018-09-28
      赞
      回复
请 登录 后发表内容