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組件

<script>
    $(function () {
        var app = new Vue({
            el: "#card",
            data: {
                ImgPath: '',
                show:false,
            },
            methods: {
                backPath: function (data) {
                    var that = this;
                    that.ImgPath = data;
                },
            },
            mounted: function () {
                var that = this;
                console.log($("#card"));
                that.show = true;
            },
            components: {
                'upload-file': uploadComponent
            }
        })
    })

</script>

修改的地方

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

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

 

注意事項

oss配置在APPsetting.json中，需要改為自己的oss配置

oss需要配置站點可信域名，所以需要發布在線上才能測試