网站首页lua/js

uniapp使用put方式推送图片文件到腾讯云

发布时间：2022-07-11 11:43:47编辑：slayer.hover阅读（1077）

uniapp打包app，直接推送图片二进制流到腾讯云, 因为uniapp不支持Blob对象, 所以借助webview来生成blob完成上传操作.




1. 先从后端接口读取到已预签名的上传链接，并缓存到storage。

let UploadTargetUrl = 'https://***.qcloud.com/****';    
uni.setStorageSync('UploadTargetUrl', UploadTargetUrl);




2. 调用uniapp的uni.chooseImage组件, 从本地相册选择图片或使用相机拍照, 获取到图片的本地文件路径.

let chooseFile = null;    
uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册选择
    success: (res) {
        console.log("获取本地图片成功", JSON.stringify(res));
        chooseFile = res.tempFilePaths[0];
    }
});




3. 使用plus.io.FileReader获取到图片的base64内容, 并将内容缓存至storage,以便webview页使用(此处勿用url传参).

// #ifdef APP-PLUS    
let fileReader = new plus.io.FileReader();
fileReader.onerror = function(e) { //读取文件出错。
    console.log("read file error", e);
};
fileReader.onload = function(e) { //读取文件结束。
    console.log("reading file", e);
}
fileReader.onloadend = function(e) { //读取文件成功结束。    
    uni.setStorageSync('UploadTargetImg', e.target.result);
    
    // 跳转到webview页面.
    uni.navigateTo({
		url: '/pages/index/uploading'
	});
};
fileReader.readAsDataURL(res.tempFilePaths[0]);
// #endif




4. 在webview中拿到图片的base64, 生成图片的blob对象.

let UploadTargetUrl = plus.storage.getItem("UploadTargetUrl");
let UploadTargetImg = plus.storage.getItem("UploadTargetImg");
let ImgBlobData   = null;

// 将base64转成blob对象
let arr  = UploadTargetUrl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}  
try{
    ImgBlobData = new Blob([u8arr], { type: mime });
} catch (e){
    console.log(e);
}




5. 将blob对象以put方式上传至腾讯云.

fetch(UploadTargetUrl,{
    method:'put',
    body: ImgBlobData,
    headers: {
    "Content-Type": mime
    }
})
.then(response=>{
    if(response.status==200) {
        uni.postMessage({
          data: {
                msg: 'uploaded'
          }
        });
    }
})
.catch(err=>{
    console.log(err);
});




6. 上传成功后, 清除缓存

plus.storage.removeItem("UploadTargetUrl");
plus.storage.removeItem("UploadTargetImg");







-------------------------华丽丽的分割线-------------------------

其实在renderjs里也可以使用blob对象, 不需要费事加这个webview页面.