uni-app上传图片到腾讯云

uni-app上传图片到腾讯云（对象存储）

客户端，先从后端请求到上传的链接，再直接上传图片到腾讯云的对象存储。

1、文件base-util.js的内容：

function chooseImageFromSys(successCb, failCb, sizeType) {
	if (undefined == sizeType) {
		sizeType = ["original", "compressed"];
	}
	uni.chooseImage({
		count: 1, //默认是9。
		sizeType: sizeType, //可以指定是原图还是压缩图，默认二者都有。
		sourceType: ["album", "camera"], //album从相册选图，camera使用相机，默认二者都有。
		success(res) {
			console.log("获取本地图片成功", JSON.stringify(res));
			if (successCb) {
				successCb(res);
			}
		},
		fail(error) {
			console.log("获取本地图片失败", error);
			if (failCb) {
				failCb(error);
			}
		}
	});
}

function uploadImageToTencentCloudWithData(imgData, successCb, failCb) {
	//其中的url是从后端请求回来的。
	uni.request({
		url: "https://cjh-1305035994.cos.ap-shanghai.myqcloud.com/test.jpg?q-sign-algorithm=sha1&q-ak=AKIDrUt3waYdlcFrVje2FBUcW5bv8qJXrnP5&q-sign-time=1614655763;1614664763&q-key-time=1614655763;1614664763&q-header-list=content-type&q-url-param-list=&q-signature=d7418d6fa1dd2ff4d72ef265698e2d0cba26ac29",
		method: "PUT",
		data: imgData,
		header: {
			"content-type": 'image/jpeg;image/jpg;image/png;image/gif'
		},
		success: function(res) {
			if (200 == res.statusCode) {
				console.log("上传图片成功", JSON.stringify(res));
			} else {
				console.log("上传图片失败", JSON.stringify(res));
			}
		},
		fail: function(error) {
			console.log("上传图片请求失败", error);
		}
	});
}

// 上传图片到后端的腾讯云服务器。
function uploadImageToTencentCloud(imgFilePath, successCb, failCb) {
	// #ifdef MP-WEIXIN
	uni.getFileSystemManager().readFile({
		filePath: imgFilePath,
		//encoding: 'base64',
		success: res => {
			uploadImageToTencentCloudWithData(res.data, successCb, failCb);
		},
		fail: function(error) {
			console.log("上传图片请求失败", error);
			if (failCb) {
				failCb(error);
			}
		}
	});
	// #endif
	
	// #ifdef APP-PLUS
	plus.io.resolveLocalFileSystemURL(imgFilePath, function(entry) {
		// 可通过entry对象操作test.html文件   
		entry.file(function(file) {
			var fileReader = new plus.io.FileReader();
			fileReader.onerror = function(e) { //读取文件出错。
				console.log("track_fr_onerror", e);
			};
			fileReader.onload = function(e) { //读取文件结束。
				console.log("track_fr_onload");
				uploadImageToTencentCloudWithData(e.target.result);
			}
			fileReader.onloadend = function(e) { //读取文件成功结束。
				console.log("track_fr_onloadend");
			};
			// fileReader.readAsText(file, 'utf-8');
			fileReader.readAsDataURL(file);
			// fileReader.readAsArrayBuffer(file); // 尽管后台使用此方法可行 但AppPlus暂时不支持此方法。
		});
	});
	// #endif
}


module.exports = {
	chooseImageFromSys: chooseImageFromSys,
	uploadImageToTencentCloud: uploadImageToTencentCloud
}

2、调用的主要代码。

import baseUtil from "@/common/base-util.js";

baseUtil.chooseImageFromSys(chooseRes => {
	baseUtil.uploadImageToTencentCloud(chooseRes.tempFilePaths[0]);
});

3、结果：

（1）在MP-WEIXIN(微信小程序)里面，是成功的；

（2）在AppPlus(iOS/Android)里面，虽然能上传成功，但是使用链接地址去获取的图片并不能正常显示出来（比如使用网页浏览器打开图片链接地址查看）。