网站首页lua/js

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

发布时间:2022-07-11 11:43:47编辑:slayer.hover阅读(336)

    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页面.

评论

  • 昵称:ft099437 来自:182.139.158.229发表于:2022-10-16 23:04:55
    大佬微信小程序也能用嘛,有没有详细的文档,感谢了