微信小程序端上传文件到阿里OSS的代码参考

微信小程序

相信很多微信小程序开发人员目前在使用阿里云OSS作为上传文件的网络存储系统。
但是微信小程序如何上传文件到阿里云OSS呢？这里就分享核心代码吧。

function wxUpFileToOss(filePath, callbackSuccess, callbackFail, isShowLoading = true, imgParams = null) {
        let fileType = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length).toUpperCase();
        if (fileType == "JPEG") fileType = "JPG";
        let params = {
                fileType: fileType,
                width: 750,
                height: 500
        }
        if (imgParams) {
                params.width = imgParams.width, params.height = imgParams.height;
        }
        if (isShowLoading) {
                wx.showLoading({
                        title: '准备上传..'
                });
        }
        try {
                let httpSet = {
                        url: 'XXX/XXXX',//调用后端接口获取阿里云签名之类的参数
                        params: params,
                        method: 'GET',
                }
                wxRequest(httpSet).then(function (result) {
                        let data = result.data;
                        wx.showNavigationBarLoading({});
                        const uploadTask = wx.uploadFile({
                                url: 'https://XXXXXXXXXXXXXX.oss-cn-shanghai.aliyuncs.com',//阿里云上传文件接口链接URL
                                filePath: filePath,
                                name: 'file',
                                formData: {
                                        'policy': data.postPolicy.policy,
                                        'key': data.postPolicy.key,
                                        'success_action_status': '200',
                                        'OSSAccessKeyId': data.postPolicy.accessKeyId,
                                        'signature': data.postPolicy.signature,
                                },
                                success: function (res) {
                                        (callbackSuccess && typeof (callbackSuccess) === "function") && callbackSuccess(result);
                                },
                                fail: function (res) {
                                        (callbackFail && typeof (callbackFail) === "function") && callbackFail(result);
                                },
                                complete: function (res) {
                                        wx.hideLoading();
                                        wx.hideNavigationBarLoading({});
                                }
                        })
                        uploadTask.onProgressUpdate((res) => {//上传任务进度监控
                                if (isShowLoading) {
                                        wx.showLoading({
                                                title: res.progres >= 100 ? '上传成功！' : ('上传中【' + (res.progress ? res.progress : '1') + '%】'),
                                        })
                                }
                        })
                })
        } finally {

        }
}

代码分析：
首先是调用后端接口，获取阿里云上传的系列签名，fileKey之类的参数。这里要说明的是，没有在小程序端直接阿里云oss的相关appid和appsecret来换取相关签名，而是采用了调用自己的后端接口来获取相关参数，这么做的目的自然是为了安全。这里也推荐大家这么做，最好不要直接把阿里云oss的appId和appSecret直接暴露再前端代码里面。
获取到阿里云oss相关参数后，咱们就直接使用wx.uploadFile这个微信小程序原生上传文件API来上传文件哈
然后在formData里面写上阿里云oss需要的参数，这样就OK啦、
调用方法：
先chooseImage后得到文件的filePath,然后调用上传方法：

wxUpFileToOss(filePath, function(result) {
                                        //上传成功回调
                                       
                                },
                                function(res) {//上传失败回调
                                        console.log("res fail", res);
                                        wx.hideLoading();
                                }
                        );