uniapp上傳圖片、視頻到oss

項目採用的是 阿里雲oss  js簽名直傳的方式。示例代碼以下：

一、上傳圖片

<template>
    <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !imgUrl}">
        <div v-if="!imgUrl" @tap="ChooseImage" class='flex-perfect-center'>
            <slot name="image">
                <image src="/static/img/btn_data_upload.png"></image>
            </slot>
            <div class="text-desc">
                <slot>上傳圖片</slot>
            </div>
        </div>
        <img class="exist-img" v-else :src="imgUrl" @tap="ChooseImage">
        <!-- <progress class="upload-progress" v-if="progress > 0" :percent="progress" active stroke-width="3"></progress> -->
        <img class="img-delete" v-if="imgUrl && deleteFlag" src="/static/icon_img/icn_delete.png" @tap="DelImg">
    </view>
</template>

<script>
    import OSSUtil from '../libs/ossUtil.js'
    export default {
        name: 'byImgUpload',
        props: {
            authId: String,
            imgUrl: String,
            deleteFlag: Boolean,
            startShowAction: Function,
            startDelete: Function,
            imgActions: Array
        },
        data() {
            return {
                progress: 0,
                imgData: {
                    visible: false,
                    actions: this.imgActions
                }
            }
        },
        methods: {
            async ChooseImage() {
                let files = await OSSUtil.getImage(); // 選擇圖片
                let sign = await OSSUtil.get_STS() // 獲取簽名等信息

                let imageSrc = files.tempFilePaths[0];
                let fileName = OSSUtil.getFileName(imageSrc); // 自定義上傳後的文件名稱
                
                let uploadTask = uni.uploadFile({
                    url: sign.host,
                    filePath: imageSrc,
                    fileType: 'image',
                    name: 'file',
                    formData: {
                        name: imageSrc,
                        'key': fileName,
                        'policy': sign.policy,
                        'OSSAccessKeyId': sign.accessId,
                        'success_action_status': '200',
                        //讓服務端返回200,否則，默認會返回204
                        'signature': sign.signature,
                    },
                    success: (res) => {
                        console.log('uploadImage success, res is:', res)
                        uni.showToast({
                            title: '上傳成功',
                            icon: 'success',
                            duration: 1000
                        });
                        this.$emit('imgUploaded', {data: sign.host + fileName, authId: this.authId});
                    },
                    fail: (err) => {
                        console.log('uploadImage fail', err);
                        uni.showModal({
                            content: err.errMsg,
                            showCancel: false
                        });
                    }
                });
                uploadTask.onProgressUpdate((res) => {
                    console.log("上傳進度" + res.progress);
                    this.progress = res.progress;
                });

                // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg() {
                this.$emit('imgDel', {
                    authId: this.authId
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    @import "../style/function.less";
    @import "../style/variable.less";

    .zyby-img-upload-common {
        height: 450rpx;
        width: 100%;
        margin-top: 26rpx;
    }

    .auth-img-item {
        position: relative;

        >div:first-child {
            height: 100%;
            flex-direction: column;

            image {
                .square-hw(46)
            }

            .text-desc {
                margin-top: 20rpx;
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                color: @base-finish-color-deep;
            }
        }

        .exist-img {
            width: 100%;
            height: 100%;
        }

        .upload-progress {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
        }

        .img-delete {
            .square-hw(36);
            position: absolute;
            top: 10rpx;
            right: 10rpx;
        }
    }

    .img-item-special {
        border: 1px dashed #13DBBF;
        /*no*/
        border-radius: 6rpx;
        /*no*/
    }
</style>

二、相關代碼

// ossUtil.js

import Crypto from '@/libs/crypto/crypto.js';
    import '@/libs/crypto/hmac.js';
    import '@/libs/crypto/sha1.js';
    import {
        Base64
    } from '@/libs/crypto/base64.js';
    import config from '@/config/index.js'

    const uploadFileSize = 1024 * 1024 * 100; // 上傳文件的大小限制100m
    const accesskey = '***************'; // 本身去申請
    const accessId = '*****************' // 本身去申請

    export default {
        _getPolicy() {
            let policyText = {
                "expiration": "2022-01-01T12:00:00.000Z", //設置該Policy的失效時間，超過這個失效時間以後，就沒有辦法經過這個policy上傳文件了
                "conditions": [
                    ["content-length-range", 0, uploadFileSize] // 設置上傳文件的大小限制
                ]
            };

            return Base64.encode(JSON.stringify(policyText))
        },
        _getSignature(message) {
            let bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
                asBytes: true
            });
            return Crypto.util.bytesToBase64(bytes);
        },
        _getSuffix(filename) {
            let pos = filename.lastIndexOf('.')
            let suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        },
        getFileName(filename) {
            console.log('filename:', filename)
            return 'wx_img/' + new Date().getTime() + Math.random().toString(36).substring(3, 20) + this._getSuffix(filename)
        },
        getImage() {
            return new Promise((resolve, reject) => {
                uni.chooseImage({
                    count: 1, //默認9
                    sizeType: ['original', 'compressed'], //能夠指定是原圖仍是壓縮圖，默認兩者都有
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        resolve(res)
                    }
                })
            });
        },
        getVideo() {
            return new Promise((resolve, reject) => {
                uni.chooseVideo({
                    count: 1,
                    sourceType: ['camera', 'album'],
                    success: function(res) {
                        if (res.size > uploadFileSize) {
                            uni.showToast({
                                title: '文件大小超過系統上傳限制：' + uploadFileSize,
                                icon: 'none',
                                duration: 1000
                            });
                            return;
                        }
                        resolve(res.tempFilePath)
                    },
                    fail: () => {
                        uni.showToast({
                            title: '取消選擇視頻',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
            });
        },
        // 獲取STS簽名
        get_STS() {
            // 讀取接口
            /* return new Promise((resolve, reject) => {
                let name = new Date().getTime() + Math.random();
                let operate = 'uploadImg';
                let that = this;
                uni.request({
                    method: "GET",
                    url: "*************",
                    data: {
                        name,
                        operate,
                        sign: Crypto.MD5(name + operate + "bayinabayin888").toString()
                    },
                    success(res) {
                        if (res.data.code != 200) {
                            that.$alert(res.data.message || res.data.msg)
                        } else {
                            resolve(res.data.data)
                        }
                    },
                    error(err) {
                        reject(err)
                    }
                })
            }) */
            // 本地獲取
            return new Promise((resolve, reject) => {
                let policy = this._getPolicy();
                let res = {
                    accessId: accessId,
                    host: config.img.ossDomain,  // 本身去申請
                    policy,
                    signature: this._getSignature(policy),
                };
                resolve(res)
            })
        },
    };

// crypto.js

/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
// (function(){

var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

// Global Crypto object
// window.Crypto = {};
let Crypto = {};

// Crypto utilities
var util = Crypto.util = {

    // Bit-wise rotate left
    rotl: function (n, b) {
        return (n << b) | (n >>> (32 - b));
    },

    // Bit-wise rotate right
    rotr: function (n, b) {
        return (n << (32 - b)) | (n >>> b);
    },

    // Swap big-endian to little-endian and vice versa
    endian: function (n) {

        // If number given, swap endian
        if (n.constructor == Number) {
            return util.rotl(n,  8) & 0x00FF00FF |
                   util.rotl(n, 24) & 0xFF00FF00;
        }

        // Else, assume array and swap all items
        for (var i = 0; i < n.length; i++)
            n[i] = util.endian(n[i]);
        return n;

    },

    // Generate an array of any length of random bytes
    randomBytes: function (n) {
        for (var bytes = []; n > 0; n--)
            bytes.push(Math.floor(Math.random() * 256));
        return bytes;
    },

    // Convert a string to a byte array
    stringToBytes: function (str) {
        var bytes = [];
        for (var i = 0; i < str.length; i++)
            bytes.push(str.charCodeAt(i));
        return bytes;
    },

    // Convert a byte array to a string
    bytesToString: function (bytes) {
        var str = [];
        for (var i = 0; i < bytes.length; i++)
            str.push(String.fromCharCode(bytes[i]));
        return str.join("");
    },

    // Convert a string to big-endian 32-bit words
    stringToWords: function (str) {
        var words = [];
        for (var c = 0, b = 0; c < str.length; c++, b += 8)
            words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32);
        return words;
    },

    // Convert a byte array to big-endian 32-bits words
    bytesToWords: function (bytes) {
        var words = [];
        for (var i = 0, b = 0; i < bytes.length; i++, b += 8)
            words[b >>> 5] |= bytes[i] << (24 - b % 32);
        return words;
    },

    // Convert big-endian 32-bit words to a byte array
    wordsToBytes: function (words) {
        var bytes = [];
        for (var b = 0; b < words.length * 32; b += 8)
            bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
        return bytes;
    },

    // Convert a byte array to a hex string
    bytesToHex: function (bytes) {
        var hex = [];
        for (var i = 0; i < bytes.length; i++) {
            hex.push((bytes[i] >>> 4).toString(16));
            hex.push((bytes[i] & 0xF).toString(16));
        }
        return hex.join("");
    },

    // Convert a hex string to a byte array
    hexToBytes: function (hex) {
        var bytes = [];
        for (var c = 0; c < hex.length; c += 2)
            bytes.push(parseInt(hex.substr(c, 2), 16));
        return bytes;
    },

    // Convert a byte array to a base-64 string
    bytesToBase64: function (bytes) {

        // Use browser-native function if it exists
        if (typeof btoa == "function") return btoa(util.bytesToString(bytes));

        var base64 = [],
            overflow;

        for (var i = 0; i < bytes.length; i++) {
            switch (i % 3) {
                case 0:
                    base64.push(base64map.charAt(bytes[i] >>> 2));
                    overflow = (bytes[i] & 0x3) << 4;
                    break;
                case 1:
                    base64.push(base64map.charAt(overflow | (bytes[i] >>> 4)));
                    overflow = (bytes[i] & 0xF) << 2;
                    break;
                case 2:
                    base64.push(base64map.charAt(overflow | (bytes[i] >>> 6)));
                    base64.push(base64map.charAt(bytes[i] & 0x3F));
                    overflow = -1;
            }
        }

        // Encode overflow bits, if there are any
        if (overflow != undefined && overflow != -1)
            base64.push(base64map.charAt(overflow));

        // Add padding
        while (base64.length % 4 != 0) base64.push("=");

        return base64.join("");

    },

    // Convert a base-64 string to a byte array
    base64ToBytes: function (base64) {

        // Use browser-native function if it exists
        if (typeof atob == "function") return util.stringToBytes(atob(base64));

        // Remove non-base-64 characters
        base64 = base64.replace(/[^A-Z0-9+\/]/ig, "");

        var bytes = [];

        for (var i = 0; i < base64.length; i++) {
            switch (i % 4) {
                case 1:
                    bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) |
                               (base64map.indexOf(base64.charAt(i)) >>> 4));
                    break;
                case 2:
                    bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) |
                               (base64map.indexOf(base64.charAt(i)) >>> 2));
                    break;
                case 3:
                    bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) |
                               (base64map.indexOf(base64.charAt(i))));
                    break;
            }
        }

        return bytes;

    }

};

// Crypto mode namespace
Crypto.mode = {};

// })();

export default Crypto;

// base64.js

export const Base64 = {

        // private property
        _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

        // public method for encoding
        encode : function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;

            input = Base64._utf8_encode(input);

            while (i < input.length) {

                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;

                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }

                output = output +
                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

            }

            return output;
        },

        // public method for decoding
        decode : function (input) {
            var output = "";
            var chr1, chr2, chr3;
            var enc1, enc2, enc3, enc4;
            var i = 0;

            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

            while (i < input.length) {

                enc1 = this._keyStr.indexOf(input.charAt(i++));
                enc2 = this._keyStr.indexOf(input.charAt(i++));
                enc3 = this._keyStr.indexOf(input.charAt(i++));
                enc4 = this._keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                output = output + String.fromCharCode(chr1);

                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }

            }

            output = Base64._utf8_decode(output);

            return output;

        },

        // private method for UTF-8 encoding
        _utf8_encode : function (string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";

            for (var n = 0; n < string.length; n++) {

                var c = string.charCodeAt(n);

                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }

            }

            return utftext;
        },

        // private method for UTF-8 decoding
        _utf8_decode : function (utftext) {
            var string = "";
            var i = 0;
            var c = c1 = c2 = 0;

            while ( i < utftext.length ) {

                c = utftext.charCodeAt(i);

                if (c < 128) {
                    string += String.fromCharCode(c);
                    i++;
                }
                else if((c > 191) && (c < 224)) {
                    c2 = utftext.charCodeAt(i+1);
                    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                    i += 2;
                }
                else {
                    c2 = utftext.charCodeAt(i+1);
                    c3 = utftext.charCodeAt(i+2);
                    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                    i += 3;
                }

            }

            return string;
        }

    }

// hmac.js

import Crypto from '@/libs/crypto/crypto.js';
/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
(function(){

// Shortcut
var util = Crypto.util;

Crypto.HMAC = function (hasher, message, key, options) {

    // Allow arbitrary length keys
    key = key.length > hasher._blocksize * 4 ?
          hasher(key, { asBytes: true }) :
          util.stringToBytes(key);

    // XOR keys with pad constants
    var okey = key,
        ikey = key.slice(0);
    for (var i = 0; i < hasher._blocksize * 4; i++) {
        okey[i] ^= 0x5C;
        ikey[i] ^= 0x36;
    }

    var hmacbytes = hasher(util.bytesToString(okey) +
                           hasher(util.bytesToString(ikey) + message, { asString: true }),
                           { asBytes: true });
    return options && options.asBytes ? hmacbytes :
           options && options.asString ? util.bytesToString(hmacbytes) :
           util.bytesToHex(hmacbytes);

};

})();

// sha1.js

import Crypto from '@/libs/crypto/crypto.js';
/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
(function(){

// Shortcut
var util = Crypto.util;

// Public API
var SHA1 = Crypto.SHA1 = function (message, options) {
    var digestbytes = util.wordsToBytes(SHA1._sha1(message));
    return options && options.asBytes ? digestbytes :
           options && options.asString ? util.bytesToString(digestbytes) :
           util.bytesToHex(digestbytes);
};

// The core
SHA1._sha1 = function (message) {

    var m  = util.stringToWords(message),
        l  = message.length * 8,
        w  =  [],
        H0 =  1732584193,
        H1 = -271733879,
        H2 = -1732584194,
        H3 =  271733878,
        H4 = -1009589776;

    // Padding
    m[l >> 5] |= 0x80 << (24 - l % 32);
    m[((l + 64 >>> 9) << 4) + 15] = l;

    for (var i = 0; i < m.length; i += 16) {

        var a = H0,
            b = H1,
            c = H2,
            d = H3,
            e = H4;

        for (var j = 0; j < 80; j++) {

            if (j < 16) w[j] = m[i + j];
            else {
                var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16];
                w[j] = (n << 1) | (n >>> 31);
            }

            var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
                     j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
                     j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
                     j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
                              (H1 ^ H2 ^ H3) - 899497514);

            H4 =  H3;
            H3 =  H2;
            H2 = (H1 << 30) | (H1 >>> 2);
            H1 =  H0;
            H0 =  t;

        }

        H0 += a;
        H1 += b;
        H2 += c;
        H3 += d;
        H4 += e;

    }

    return [H0, H1, H2, H3, H4];

};

// Package private blocksize
SHA1._blocksize = 16;

})();

三、上傳視頻

<template>
  <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !videoUrl}">
    <div v-if="!videoUrl"  @tap="ChooseVideo" class='flex-perfect-center'>
      <slot name="image"><image src="/static/img/btn_data_upload.png"></image></slot>
      <div class="text-desc"><slot>上傳視頻</slot></div>
    </div>
     <video class="exist-img" controls v-else :src="videoUrl"></video>
                    <!-- <video class="exist-img" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
                                   @error="videoErrorCallback" controls v-else :src="videoUrl"></video> -->
    <progress class="upload-progress" v-if="progress > 0" :percent="progress" active stroke-width="3"></progress>
    <img class="img-delete" v-if="videoUrl && deleteFlag" src="/static/icon_img/icn_delete.png" @tap="DelImg">
  </view>
</template>

<script>
  import OSSUtil from '../libs/ossUtil.js'

  export default {
    props: {
      authId: String,
      videoUrl: String,
      deleteFlag: Boolean,
    },
    data () {
      return {
          progress: 0,
        imgData: {
          visible: false,
          actions: this.imgActions
        }
      }
    },
    methods: {
        async ChooseVideo() {
            let imageSrc = await OSSUtil.getVideo();
            let sign = await OSSUtil.get_STS()
        
            let fileName = OSSUtil.getFileName(imageSrc);
            
            let uploadTask = uni.uploadFile({
                url: sign.host,
                filePath: imageSrc,
                fileType: '',
                name: 'file',
                formData: {
                    name: imageSrc,
                    'key': fileName,
                    'policy': sign.policy,
                    'OSSAccessKeyId': sign.accessId,
                    'success_action_status': '200',
                    //讓服務端返回200,否則，默認會返回204
                    'signature': sign.signature,
                },
                success: (res) => {
                    console.log('res:', res)
                    uni.showToast({
                        title: '上傳成功',
                        icon: 'success',
                        duration: 1000
                    });
                    this.$emit('videoUploaded', {data: sign.host + fileName, authId: this.authId});
                },
                fail: (err) => {
                    uni.showModal({
                        content: err.errMsg,
                        showCancel: false
                    });
                }
            });
            uploadTask.onProgressUpdate((res) => {
                console.log("上傳進度" + res.progress);
                this.progress = res.progress;
            });
        
            // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
        }
    }    
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  @import "../style/function.less";
  @import "../style/variable.less";

  .zyby-img-upload-common {
    height: 450rpx;
    width: 100%;
    margin-top: 26rpx;
  }
  .auth-img-item {
    position: relative;
    > div:first-child {
        height: 100%;
        flex-direction: column;
        image {
        .square-hw(46)
        }
        .text-desc {
          margin-top: 20rpx;
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: @base-finish-color-deep;
        }
    }
    .exist-img {
        width: 100%;
        height: 100%;
      }
      .upload-progress {
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
      }
    .img-delete {
      .square-hw(36);
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }
  }
  .img-item-special {
    border: 1px dashed #13DBBF;/*no*/
    border-radius: 6rpx;/*no*/
  }
</style>