第一步(需要由後臺提供介面,前端獲取一些必要引數)

    oss: function(token) {
        var _this = this;
        wx.request({
            url: kidUrl + 'JurisdictionOss/encryption',
            data: {
                token: token
            },
            method: 'POST',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                if (res.statusCode == 200) {
                    _this.setData({
                        accessid: res.data.accessid,
                        policy: res.data.policy,
                        signature: res.data.signature,
                        uploadUrl: res.data.host,
                        uploadUrlend: res.data.dir,
                        expire: res.data.expire,
                    })
                }
            }
        })
    },
 

第二步(獲取上傳的圖片的臨時路徑)

    addPhoto: function(res) {
        var _this = this;
            wx.chooseImage({
                sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
                sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
                success: function(res) {
                    // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
                    var tempFilePaths = res.tempFilePaths;
                    _this.setData({
                        photoArr: tempFilePaths
                    })
                }
            })
    },
 

第三步(圖片上傳阿里雲/伺服器)

    //上傳照片(阿里雲)
    uploadAli: function(babyData, photoArr) {
        var _this = this;
        var uploadUrl = this.data.uploadUrl;
        var uploadUrlend = this.data.uploadUrlend;
        var photoArrLen = photoArr.length;
        wx.uploadFile({
            url: uploadUrl,
            formData: babyData,
            name: 'file',
            filePath: photoArr[0],
            header: {
                'content-type': 'multipart/form-data'
            },
            success: res => {
                if (res.statusCode == 200) {
                    //表示上傳成功(可以在阿里雲伺服器檢視上傳的圖片)
                }
            }
        })
    },
    //圖片上傳伺服器
    uploadRq: function(imgData) {
        var _this = this;
        wx.request({
            url: kidUrl + 'xxxx',
            data: imgData,
            method: 'POST',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                //成功後臺會給你返回阿里雲那邊的圖片地址
            }
        })
    }, 
 

第四步(點選上傳圖片的按鈕操作)

    //釋出按鈕
    release: function(e) {
        var _this = this;
        //獲取照片陣列
        var photoArr = this.data.photoArr;
        //獲取時間
        var date = this.data.date;
        var userToken = this.data.userToken;
        //時間搓
        var expire = this.data.expire;
        //獲取當前時間搓
        var expireNow = Date.parse(new Date()) / 1000;
        //如果當前時間大於獲取的時間 則重新獲取oss;      
        if (expireNow > expire) {
            //重新獲取oss
            _this.oss(userToken);
            expire = this.data.expire;
        }
        //傳給阿里雲的引數
        var policy = this.data.policy;
        var accessid = this.data.accessid;
        var signature = this.data.signature;
        var uploadUrlend = this.data.uploadUrlend;
        //傳給阿里雲的引數-end
        var newPhoto = '';
        var photoArrsm = '';
        //由於微信小程式生成的臨時路徑在上傳阿里雲的時候不需要上傳.所以需要對路徑進行處理,但是在手機端上傳和PC端上傳,圖片臨時路徑的字首不同,所以需要進行分別的處理
        if (photoArr[0].indexOf('http://tmp/') != -1) {
            photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");
        }
        if (photoArr[0].indexOf('wxfile://') != -1) {
            photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");
        }
            // 傳給伺服器的引數
        var imgData = {
            token: userToken,
            descript: textareaTxt,
            type: 1,
            write_time: date,
            babyid: babyid,
            phtots_url: photoArrsm
        }
        _this.uploadRq(imgData)
        var babyData = {
            'Filename': '${filename}',
            'name': 'photoArr[0]',
            'key': uploadUrlend + '${filename}',
            'policy': policy,
            'OSSAccessKeyId': accessid,
            'success_action_status': '200', //讓服務端返回200,不然，預設會返回204
            'signature': signature
        }
        this.uploadAli(babyData, photoArr)
    },

上傳流程:

選擇圖片-->獲取到圖片臨時路徑,將圖片臨時路徑存入data

點擊發布按鈕-->獲取oss引數

獲取oss引數成功-->執行上傳阿里雲

上傳阿里雲成功-->執行上傳伺服器

上傳伺服器成功-->結束整個上傳流程

由於為了方便大家瀏覽,沒有用函式回撥. 

大家可以根據自己的需求,結合自己的場景,來進行函式回撥或者使用ES6的Promise方法.

上傳阿里雲過程中幾個容易忽視的坑: 圖片路徑處理/時間戳判斷

特別注意:

這裡官方文件給出的傳法是如上圖所示,但是在微信小程式中不知道什麼原因會導致無法上傳 報錯403,

於是我改了寫法,如下圖

用這樣的寫法是可以上傳成功的 /修改key的 ${filename} 名字,即是修改上傳的檔案的名稱