? ? 我們在實際業(yè)務中經常能遇到將各種資源上傳到云服務器，這樣做第一是能更好的管理我們的比如圖片資源，視頻，音頻資源等，同時也能節(jié)約公司的網絡帶寬，減少各種資源隨著時間的推移資源越來越多造成服務器的硬盤壓力過大。還有一個重要的原因是可以保護我們的資源被其他人盜用的問題.下面我就來介紹在小程序中如何將各種資源直傳到阿里云OSS。話不多說直接上代碼?

小程序 index.js??

在每次調用讀取文件之前之前，需要重新獲得零時授權，防止授權憑證過期導致無法上傳

import UploadAliOss from "../../common/aliyunOss/uploadOssClass";
const AliyunOss = new UploadAliOss();

  // 讀取文件之前  需要重新獲得零時授權  
    async beforeRead(event) {
        await AliyunOss.GetOSSKeyInfo();
        Toast.loading({
            message: '上傳中...',
            forbidClick: true,
            duration: 0
        });
        event.detail.callback(true);
    },

讀取文件之后調用上傳方法，

  // 文件讀取完成后
    async afterRead(event) {
        const {
            file
        } = event.detail;
        const {
            Code,
            Data
        } = await AliyunOss.uploadFile(file.url)
        console.log("AliyunOss.uploadFile", Code, Data);
        if (Code == 200) {
            const imgInfo = new ImgClass(BaseImgUrl + Data);
            Toast.clear();
            this.setData({
                fileList: [...this.data.fileList, imgInfo]
            })
        } else {
            Toast.fail('上傳失敗');
        }

    },

uploadOssClass.js? 注意?uploadImageUrl 這個地址需要配置到,合法域名中文章來源地址http://www.zghlxwxcb.cn/news/detail-543751.html

const crypto = require('crypto.js');
const base64 = require('base64.js'); // Base64,hmac,sha1,crypto相關算法

import {
    GetOSSKey
} from "../../api/api";

const uploadImageUrl = "xxxxxxxx"; //你的阿里云OSS地址  在你當前小程序的公眾號后臺的uploadFile 合法域名也要配上這個域名

class UploadAliOss {
    constructor(options = {}) {
        // 限制參數(shù)的生效時間，單位為小時，默認值為1。
        this.timeout = options.timeout || 1;
        // 限制上傳文件的大小，單位為MB，默認值為10。
        this.maxSize = options.maxSize || 10;
    }
    // 服務端獲取上傳秘鑰 和 臨時授權
    async GetOSSKeyInfo() {
        const result = await GetOSSKey();
        this.securityToken = JSON.parse(result).SecurityToken;
        this.accessKeyId = JSON.parse(result).AccessKeyId;
        this.accessKeySecret = JSON.parse(result).AccessKeySecret;
    };
    // 上傳文件  filePath 文件的臨時地址 dir 文件夾 生成的文件反正那個文件夾下 方便管理
    uploadFile(filePath, dir = "xlya") {
        return new Promise((resolve, reject) => {
            if (!filePath) {
                reject({
                    Code: 501,
                    Msg: "上傳失敗,請稍后再試"
                })
                return
            }
            // 設置文件存放的地址以及為文件命名 隨機數(shù)防止文件重名被覆蓋
            const aliyunFileKey = dir + "/" + new Date().getTime() + Math.floor(Math.random() * 150);
            wx.uploadFile({
                url: uploadImageUrl, //開發(fā)者服務器 url
                filePath: filePath, //要上傳文件資源的路徑
                name: 'file', //必須填file
                formData: {
                    'key': aliyunFileKey, // 設置文件上傳至OSS后的文件路徑
                    'success_action_status': '200',
                    ...this.getUploadParams()
                },
                success: function (res) {
                    if (res.statusCode == 200) {
                        resolve({
                            Code: 200,
                            Data: "/" + aliyunFileKey
                        })
                    } else {
                        reject({
                            Code: 501,
                            Msg: "上傳失敗,請稍后再試"
                        })
                    }
                },
                fail: function (err) {
                    reject({
                        Code: 501,
                        Msg: "上傳失敗,請稍后再試"
                    })
                },
            })
        })
    }
    // 獲取上傳接口需要的參數(shù)
    getUploadParams() {
        const policy = this.getPolicyBase64();
        const signature = this.signature(policy);
        return {
            OSSAccessKeyId: this.accessKeyId,
            policy: policy,
            signature: signature,
            'x-oss-security-token': this.securityToken,
        };
    }
    getPolicyBase64() {
        let date = new Date();
        // 設置policy過期時間。
        date.setHours(date.getHours() + this.timeout);
        let srcT = date.toISOString();
        const policyText = {
            expiration: srcT,
            conditions: [
                // 限制上傳文件大小。
                ["content-length-range", 0, this.maxSize * 1024 * 1024],
            ],
        };
        return base64.encode(JSON.stringify(policyText));
    }
    // 獲取簽名
    signature(policyBase64) {
        const accesskey = this.accessKeySecret;
        const bytes = crypto.HMAC(crypto.SHA1, policyBase64, accesskey, {
            asBytes: true
        });
        const signature = crypto.util.bytesToBase64(bytes);
        return signature;
    }

}

export default UploadAliOss

到了這里，關于微信小程序將資源上傳阿里云OSS的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！