基于nuxt和iview搭建OM后台管理系统实践(3)-阿里oss上传组件的封装

封面图，基于创客贴在线制作

这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录，大致思路如下：

• 简要介绍OM后台管理系统，以及开发环境

• 自行开发的公共组件，富文本quill[已完成]、地图、上传组件的封装过程

• 项目上线流程，自动化打包（Jenkins）

• 项目总结，总结开发过程中的坑点，避免以后再掉坑

上一篇记录了quill富文本的封装过程，这一篇开始讲解上传组件（七牛、阿里云oss）的封装。

如动图所示，为上传组件演示，可以看到组件有上传、预览、删除重新上传、文件大小校验等功能。

上传组件演示

实现原理：用input[type='file']标签，并绑定一个change事件实现选择本地电脑文件操作，同时通过其他button触发input的change事件，最终与阿里oss进行交互实现上传图片的功能。

步骤1:引入阿里云osssdk代码，需要注意的是：框架使用的nuxt，引入sdk需要按照nuxt的规范在head方法里引入，附上head方法使用文档地址；

// 文件 components/upload.vue.file {  display: none;
}.demo-upload-list {  display: inline-block;  width: 60px;  height: 60px;  text-align: center;  line-height: 60px;  border: 1px solid transparent;  border-radius: 4px;  overflow: hidden;  background: #fff;  position: relative;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);  margin-right: 4px;
}.demo-upload-list img {  width: 100%;  height: 100%;
}.demo-upload-list-cover {  display: none;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background: rgba(0, 0, 0, 0.6);
}.demo-upload-list:hover .demo-upload-list-cover {  display: block;
}.demo-upload-list-cover i {  color: #fff;  font-size: 20px;  cursor: pointer;  margin: 0 2px;
}

iview官方提供了一个上传组件，但是不符合我们实际需求，我查看了源码并在此基础上进行了二次封装最终实现了需求。现在再回过头去看写的代码发现有点乱，后续抽空会进行代码优化。同时要吐槽下阿里oss文档，都没有一个demo让开发者查看，显得很不友好。

作者：愿爱无忧dk_
链接：https://www.jianshu.com/p/3714417697fb