uni-app 微信小程式直傳圖片、視訊到 oss

微信小程式上傳檔案到阿里雲oss的程式碼： https://www.jianshu.com/p/34d6dcbdc2e5 、https://www.cnblogs.com/ziyoublog/p/13085217.html
微信小程式直傳實戰： https://help.aliyun.com/document_detail/92883.html?spm=a2c4g.11186623.6.670.5265350asB84kG

一、配置 Bucket 跨越訪問

1. 登入 OSS 管理控制檯
2. 單機 Bucket 列表，之後單擊目標 Bucket 名稱
3. 單擊許可權管理 > 跨域設定，在跨域設定區域單擊設定
4. 單擊建立規則，配置如下圖所示
   

二、微信公眾號後臺域名配置

三、配置**，上傳

1. 在 config.js 檔案中配置 OSSAccessKeyId 、AccessKeySecret 和 fileHost
   

2. 相關檔案的下載

3. uploadFile.js

   const env = require('./env.js');
   
   const Base64 = require('./Base64.js');
   
   require('./crypto/hmac.js');
   require('./crypto/sha1.js');
   const Crypto = require('./crypto/crypto.js');
   
   const
    
    uploadFile = function (filePath, filew, objectId, successCB, errorCB) {
       if (!filePath || filePath.length < 9) {
           uni.showModal({
               title: '視訊錯誤',
               content: '請重試',
               showCancel: false
           })
           return;
       }
       
       console.log('上傳視訊...');
       const
    
    aliyunFileKey = fileW + '' + (new Date().getTime()) + '_' + objectId + '.mp4';
       const aliyunServerURL = env.aliyunServerURL;
       const accessid = env.accessid;
       const policyBase64 = getPolicyBase64();
       const signature = getSignature(policyBase64);
       
       console.log('aliyunFileKey=', aliyunFileKey);
       
       uni.uploadFile({
           url: aliyunServerURL,
           filePath: filePath,
           name: 'file',
           formData: {
               'key': aliyunFileKey,
               'OSSAccessKeyId': accessid,
               'policy': policyBase64,
               'Signature': signature,
               'success_action_status': 200
           },
           success: function(res) {
               if (res.statusCode != 200) {
                   errorCB(new Error('上傳錯誤：' + JSON.stringify(res)));
                   return;
               }
               console.log('上傳視訊成功'， res);
               successCB(aliyunFileKey);
           },
           fail: function(err) {
               err.wxaddinfo = aliyunServerURL;
               errorCB(err);
           }
       })
   }
   
   const getPolicyBase64 = function() {
       let date = new Date();
       date.setHours(date.getHours() + env.timeout);
       let srcT = date.toISOString();
       const policyText = {
           "expiration": srcT,
           "conditions": [
               ['content-length-range', 0, 20 * 1024 * 1024]
           ]
       }
       
       const policyBase64 = Base64.encode(JSON.stringify(policyText));
       return policyBase64;
   }
   
   const getSignature = function(policyBase64) {
       const accesskey = env.accesskey;
       
       const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
           asBytes: true
       });
       const signature = Crypto.util.bytesToBase64(bytes);
       
       return signature
   }
   
   modele.exports = uploadFile;
   

4. 頁面引入

   import uploadImage from '@/components/ossutil/uploadFile.js'
   

5. 完整功能頁面

   html程式碼塊

   <template>
   	<view style="padding-bottom: 10rpx;">
       	<view class="cu-bar bg-white margin-top">
       		<view class="action">圖片上傳</view>
               <view class="action">{{imgList.length}}</view>
       	</view>
           <view class="cu-form-group">
       		<view class="grid col-3 grid-square flex-sub">
       			<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
       				<image :src="imgList[index]" mode="aspectFill"></image>
                       <!-- @top.stop 組織點選事件繼續傳播 -->
                       <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
       					<text class="cuIcon-close"></text>
       				</view>
       			</view>
                   <view class="solids" @tap="ChooseImage" v-if="imgList.length < 6">
                       <text class="cuIcon-cameraadd"></text>
       			</view>
       		</view>
       	</view>
       </view>
   </template>
   

   vue程式碼塊

   <script>
   	import uploadImage from '@/components/ossutil/uploadFile.js';
       import main from '@/main.js'
       
       export default {
           data() {
               return {
                   imgList: [],
                   submit_img: [],
                   oss_result: []
               }
           },
           onload:function(e) {
               
           },
           methods: {
               // 圖片上傳
               ChooseImage() {
                   uni.chooseImage({
                       count: 9,	// 預設9
                       sizeType: ['compressed'],	// compressed 壓縮圖，original
                       success: (res) => {
                           if (this.imgList.length != 0) {
                               this.imgList = this.imgList.concat(res.tempFilePaths);
                               this.submit_img.push(res.tempFilePaths);
                           } else {
                               this.imgList = res.tempFilePaths
                               this.submit_img.push(res.tempFilePaths);
                           }
                           
                           for (var i = 0; i < this.imgList.length; i++) {
                               // 顯示訊息提示框
                               // 上傳圖片
                               // 圖片路徑可自行修改
                               uploadImage(this.imgList[i], 'sd/suggest_img/jy', result => {
                                   console.log("返回的圖片路徑++++" + result);
                                   this.oss_result.push(result);
                               }, fail => {
                                   console.log("fail++++" + JSON.stringify(fail));
                               })
                           }
                       }
                   });
               },
               // 預覽圖片
               ViewImage(e) {
                   uni.previewImage({
                       urls: this.imgList,
                       current: e.currentTarget.dataset.url
                   });
               },
               // 刪除圖片
               DelImg(e) {
                   uni.showModal({
                       content: '確定要刪除嗎？',
                       cancelText: '取消'，
                       confirmText: '確定',
                       success: res => {
                       	if (res.confirm) {
                       		this.imgList.solice(e.currentTarget.dataset.index, 1)
                       		this.submit_img.splice(e.currenTarget.dataset.index, 1)
                       		console.log("shengyu++++" + JSON.stringify(this.imgList))
                   		}
                   	}
                   })
               }
           }
       }
   </script>