uni-app 上传图片到七牛云

  • Post author:
  • Post category:其他

uni-app 上传图片到七牛云

我的流程是:在上传图片到七牛之前,先调后端提供的接口获取token、key等,然后通过uni.uploadFile把token、key传给七牛;
token:从后端获取的token值;
key:这里需要做一下拼接(获取的文件名前缀+唯一码或者时间戳),唯一码:这里贴上大佬的链接:唯一码链接;时间戳的话自己加上即可。

  1. 调后端接口获取token、key等值;
this.axios.request({
    url: `/file/storeToken`,
    method: 'GET',
}).then(res => {
    if (res.data.data) {
        let uploadMsg = res.data.data;
        // 唯一码
        let uniqueCode = generateUUID();
    }
}).catch(err => {
    console.log(err);
})
  1. 从本地选择图片
uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (chooseImageRes) {
        console.log(chooseImageRes.tempFilePaths);
    }
});
  1. 上传图片到七牛云(注意:这里要把url换成七牛的!!!
    在这里插入图片描述

最后,附上完整代码

// 上传图片
onUpload() {
    uni.chooseImage({
        count: 9, // 默认9
        sizeType: ['compressed', 'original'],
        sourceType: ['album', 'camera'],
        success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            this.axios.request({
                url: `/file/storeToken`,
                method: 'GET',
            }).then(res => {
                if (res.data.data) {
                    let uploadMsg = res.data.data;
                    let uniqueCode = generateUUID();
                    uni.uploadFile({
                        url: 'https://up.qbox.me',
                        filePath: tempFilePaths[0],
                        name: 'file',
                        formData: {
                            'key': uploadMsg.keyPrefix + uniqueCode,
                            'token': uploadMsg.upToken
                        },
                        success: (uploadFileRes) => {
                            let key = JSON.parse(uploadFileRes.data).key;
                            let partImgUrl = uploadMsg.prefix + key;
                            this.partImgList.push({
                                imgUrl: partImgUrl
                            })
                        },
                        fail: (err) => {
                            console.log('fail', err);
                        }
                    });
                }
            }).catch(err => {
                console.log(err);
            })
        }
    });
}

值得注意的一点是:按照常理来说uni.chooseImage()应该在调接口之后,但是如果把uni.chooseImage()放在接口成功回调里面,你会发现调不起来选择图片的方法,两个操作换下位置就ok了。
我在chrome浏览器操作是正常的,但是这个项目需要兼容QQ浏览器,所以出现了这个问题,如果不需要QQ浏览器的话可以不用这么操作。

如有错误或不足,欢迎各位大佬评论指正。


版权声明:本文为weixin_44711440原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。