几种常见的上传图片的方式（微信小程序，微信公众号，普通的网页，uni-app）

普通的网页:

	
	
			function getzImg(imgFile) {
				var file = imgFile.files[0];
				console.log(file)
				}
				使用formdata提交文件流就可以了
				

微信小程序（小程序不支持file blob格式）
第一种方式，获取文件路径使用小程序自带的api转换文件为base64,然后普通的接口请求上传文件

  wx.chooseImage({
      count: 1,
      sizeType: ['compressed'], //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
       // wx.hideLoading()
        // 限制最多只能留下2张照片
        console.log(res)
        this.setData({
          materialUpLoad1File: 'data:image/png;base64,'+wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64')
        })
      }
    })

第二种使用小程序提供的上传文件的api，使用formdata提交到后台上传图片得到本地服务器的图片地址，然后再上传图片

wx.uploadFile({
      url: baseUrl+'open/uploadPhotos', //仅为示例，非真实的接口地址
      filePath: list[0],
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data",
        'accept': 'application/json'
        },
      formData: {
      },
      }）
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729163216635.png)

微信公众号 
第一种:（可以用普通的文件流方式上传）（如果后台是特殊格式可以参考网址[添加链接描述](https://blog.csdn.net/yayayangge/article/details/83654464?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param)）
常用的转换格式方法
第一个：base64转为Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

第二个：Blob转为base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}
 第三个：base64转换为file
  function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }
第四个：js图片转换为base64
function getImgToBase64(url,callback){//将图片转换为Base64
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}

第二种  微信jssdk

// 推荐使用1.3.2以上的版本，之前的版本很多坑?
https://res.wx.qq.com/open/js/jweixin-1.3.2.js
 wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，微信公众号的唯一标识，此处填写公众号的appId
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.checkJsApi({
    jsApiList: ['chooseImage'] // 需要检测的JS接口列表
    success: function(res) {
    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    },
    fail: function(err) {
    // checkJsApi接口调用失败
    }
});
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

处理图片数据为base64

wx.chooseImage获取到的图片为一个临时路径，微信同时提供了wx.getLocalImgData方法可以把获取到的路径转为base64格式的数据，至此就可以轻松许多了，但是转出来的base64在android和iOS中稍有不同，需要特别注意一下
wx.getLocalImgData({
    localId: req.localIds[0].toString(),
    success: function (res) {
        const localData = res.localData;
        let imageBase64 = '';
        if (localData.indexOf('data:image') == 0) {
            //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
            imageBase64 = localData;
        } else {
            //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
            //此时一个正常的base64图片路径就完美生成赋值到img的src中了
            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
        }
    }
});
传图片
获取到图片的base64数据之后其实我们就可以为所欲为了，根据需要转换格式然后上传到自己的服务器第三种：不转换base64让后台写一个接口去 微信的服务器上面下载图片
uni-app ：使用方式跟小程序的第二种比较像
uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        uni.uploadFile({
            url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
            }
        });
    }
});