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