小白接口官网：https://www.yesapi.cn/

---

1. 使用的小白接口:App.CDN.UploadImgByBase64

链接：http://api.okayapi.com/?s=App.CDN.UploadImgByBase64

2. 思路

• 先再小程序的微信公众平台上设置小白域名为合法域名
• 选择图片，获取到本地的临时图片路径
• 将文本路径图片转成base64编码（记得设置返回数据格式必须是Arraybuffer）
• 同时base64要在头部加上data:image/jpeg;base64
• 表单提交请求接口，传编码后的数据（必须是POST提交的哦，注意***请求头***的类型）

样例代码

• wxml

    <view class="page">
    	<form bindsubmit="formSubmit" bindreset="formReset">
    		<view class="weui-uploader__hd">
    			<view class="weui-uploader__title">
    				图片上传
    			</view>
    		<view class="weui-uploader__info">{{chooseImageUrl.length}}/6
    		</view>
    				<input class="weui-uploader__input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" bindtap='uploader' name="images">
    				</input>
    	</view>
    		<button class="buttona" form-type="submit">发布动态</button>
    	</form>
    </view>

• 从手机相册里面拿出照片

    // 第一步拿相册
    chooseImage: function (e) {
    	var that = this
    	var attach = []
    	//wx.chooseImage 不多介绍看文档
    	wx.chooseImage({
    
    		sourceType: ['album', 'camera'],
    		sizeType: ['compressed'],
    		count: 6 - that.data.imgCount,
    		success: function (res) {
    	
    			//调用urlTobase64方法把照片转成base64格式 方法在下面会提到
    			that.urlTobase64(res.tempFilePaths[0]);
    
    			var tempFilePaths = res.tempFilePaths;
    			var len = that.data.imgCount + tempFilePaths.length
    				//len 是此时已有的张数和本次上传的张数的和，也就是本次操作完成页面应该有的张数，因为用户   可能会多次选择图片，所以每一次的都要记录下来。
    			for (var i = 0; i < tempFilePaths.length; i++) {
    				//将api 返回的图片数组push进一开始的imgArr，一定要循环一个个添加，因为用户上传多张图直接push就会多个路径在imgArr的同一个元素里。报错
    			imgArr.push(tempFilePaths[i]);}
    
    			var addImagehid = falseif (len >= 6) {
    				addImagehid = true
    				}
    
    		//将此时的图片长度和存放路径的数组加到要渲染的数据中
    				that.setData({
    				imgCount: len,
    				chooseImageUrl: imgArr,
    				chooseImagehid: addImagehid
    					})
    				}
    			})
    },

• 将图片base64编码的方法

    //把文本路径图片转成base64编码
    urlTobase64(url) {
    	wx.request({
    		url: url,
    		responseType: 'arraybuffer', 
    		//最关键的参数，设置返回的数据格式为
    		arraybuffersuccess: res => {
    
    		//把arraybuffer转成base64
    		let base64 = wx.arrayBufferToBase64(res.data);
    
    		//不加上这串字符，在页面无法显示的哦
    		base64 = 'data:image/jpeg;base64,' + base64
    
    		//打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢.记得在前面data设置baseImg：""
    		this.setData({baseImg: base64})
    		}
    })
    },

• 提交与上传的方法

    //表单提交的方法
    formSubmit: function (e) 
    {
    		//这里触发图片上传的方法
    		var tempc = e.detail.value.content;
    		var that = thisvar pics = this.data.chooseImageUrl;
    		// that.data.uploadimgnameArr = {};
    		wx.showLoading({title: '提交中...',})
    		setTimeout(function () {wx.hideLoading()}, 2000)
    		this.upload(that.data.baseImg);
    },
    	//把base64的图片上传！
    upload: function (file) {
    	let params = {s: "App.CDN.UploadImgByBase64",
    	// 必须，待请求的接口服务名称
    	file_name: "Camaro.png",
    	file: file
    	};
    	wx.request({
    		url: getApp().globalData.okayapiHost,
    		 // 仅为示例，非真实的接口地址
    			method: 'post',
    			header: { 
    			"content-type": "application/x-www-form-urlencoded"
    			 },
    			data: okayapi.enryptData(params),
    			success(res) {
    			const data = res.dataconsole.log(res)
    		}
    	})
    },

• 返回成功

    {
    	"ret": 200,
    	"data": 
    		{
    				"err_code": 0,
    				"err_msg": "",
    				"url": "http://cdn7.okayapi.com/0D19F4F8568B4232213F87FC45C03253_20190321013957_f87f665ff90542a6433fb335d6f2f51b.jpeg"
    		},
    		"msg": "当前小白接口：App.CDN.UploadImgByBase64"
    }

最终效果图片