基于nuxt和iview搭建OM后台管理系统实践(4)-七牛上传组件的封装

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

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

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

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

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

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

上一篇记录了阿里oss上传组件的封装过程，这一篇开始讲解七牛上传组件的封装。原本计划上传组件用一篇文章来写，发现代码有点多，索性就分两篇来写。

如动图所示，为七牛上传组件演示，可以看到组件有上传、预览、删除重新上传等功能。（功能与前面阿里oss上传组件相同）

七牛上传组件演示

其实这里的封装很简单，直接用的ivivew提供的upload组件，翻阅iview文档发现可以在upload组件的data属性里传七牛token即可完成上传功能。然后token值官方推荐后端生成，google一下发现github上有人封装了npm包（qiniu-uptoken），可以不需要后端支持直接在前端生成token，简直爽歪歪咯，谁叫我不会后端呢，哈哈哈哈！此处我想给自己一个尴尬而不失礼貌的微笑

iview upload说明文档

// 文件componets/qiniu-upload.vue
        
            
        
    
    
        
            
        
    
    
        
    .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;
}

使用方法：按照vue标准引用局部组件的方式引入即可，调用handleSuccess方法即可获取上传完成的url。在此推荐写一个箭头回调函数（如下），这样在一个页面有多个引用的时候可以减少很多冗余代码。

 this.formItem.litpic = url">

• 坦率来讲这个组件不叫封装，其实就只做了一件最核心的事情，那就是在前端生成七牛token。

• 尽管iview有一些坑，但不得不说其用户体验做得是非常不错的，通过查看其源码也学到了很多东西，比如代码规范、前端用户体验，iview都做得蛮出色的

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