小程序上传图片方法2(免搭建上传到小白接口免费服务器)

小程序上传图片方法2(免搭建上传到小白接口免费服务器)

---

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

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

2. 思路

• 先在小程序的微信公众平台上设置小白域名为合法域名（小白接口免费给域名，服务器 https://www.yesapi.cn/docs/#/v2.0/client?id=微信小程序接入示例 并且可免费上传图片哦！）
  -
• 选择图片，获取到本地的临时图片路径
• 将文本路径图片转成base64编码（记得设置返回数据格式必须是Arraybuffer）
• 同时base64要在头部加上data:image/jpeg;base64
• 表单提交请求接口，传编码后的数据（必须是POST提交的哦，注意***请求头***的类型）

样例代码

• wxml

    
   		

    		
    			
    				图片上传
    			
    		{{chooseImageUrl.length}}/6
    		
    				
    				
    	
    		发布动态
    	
    

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

// 第一步拿相册
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编码的方法 
    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"
    }

                                                    **最终效果图片**