c#版阿里雲oss上傳——基於layui、pupload的oss 後端web端直傳的vue組件

廢話前言

去年，作項目用到oss上傳，度娘上逛了一圈寫了個先後端代碼結合的c#版oss上傳。

今年又要用到oss上傳時發現很難複用，複用改動的範圍太大，顯然這個輪子不合格。因而想了下，花了一天的時間（半天打代碼，半天寫隨筆）從新造了個輪子

---

 Demo地址：https://gitee.com/orrzt/OssUpload

涉及語言框架

後端用的是c#，採用了先後端分離，前端用到的主要有layui、pupload、vue

中心思想以下：

經過vue將oss上傳封裝成一個vue組件，單獨分離到一個js文件裏，須要使用時只需引用js，在vue裏註冊組件，使用組件。

後端須要提供了一個api，用於獲取oss臨時簽名，給到web端直傳oss；

輪子使用方法

1.寫入vue組件

<upload-file v-bind:ImgPath="ImgPath" v-on:path="backPath" filesize="1" id="ImgPath"></upload-file>  <!--id需確保頁面惟一-->

3.引用必要js文件

<script src="~/js/jquery.min.js"></script>
<script src="~/js/layui/layui.js"></script>
<script src="~/js/vue.js"></script>
<script src="~/js/plupload.full.min.js.js"></script>
<script src="~/js/uploadfile.js"></script>

4.註冊vue組件

 1 <script>
 2     $(function () {  3         var app = new Vue({  4             el: "#card",  5  data: {  6                 ImgPath: '',  7                 show:false,  8  },  9  methods: { 10                 backPath: function (data) { 11                     var that = this; 12                     that.ImgPath = data; 13  }, 14  }, 15             mounted: function () { 16                 var that = this; 17                 console.log($("#card")); 18                 that.show = true; 19  }, 20  components: { 21                 'upload-file': uploadComponent 22  } 23  }) 24  }) 25 
26 </script>

修改的地方

 組件須要修改的地方就是 獲取oss簽名的api，api要求返回

{accessid:"oss accessid",host:"oss上傳地址",policy:"上傳策略",signature:"簽名",expire:"上傳策略失效時間",dir:"上傳地址",filename:"文件名"}

 

注意事項

oss配置在APPsetting.json中，須要改成本身的oss配置

oss須要配置站點可信域名，因此須要發佈在線上才能測試

原文出處：https://www.cnblogs.com/orrzt/p/12391316.html