小程序使用小白接口上傳圖片方法2

小白接口官網：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"
    }

最終效果圖片