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

时间 2019-12-06

标签基于 nuxt iview 搭建后台管理系统实践阿里 oss 上传组件封装栏目阿里巴巴繁體版

原文原文链接

目录结构

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

简要介绍OM后台管理系统，以及开发环境
自行开发的公共组件，富文本quill[已完成]、地图、上传组件的封装过程
项目上线流程，自动化打包（Jenkins）
项目总结，总结开发过程当中的坑点，避免之后再掉坑

前言

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

看东西

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

阿里oss上传组件实现过程

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

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

// 文件 components/upload.vue
<template>
<!--省略业务代码-->
</template>
<script>
export default {
  head: {
    script: [{ src: "http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js" }]//引入sdk
  },
<script>
<style>
/*省略样式代码*/
</style>
复制代码

步骤2:获取上传token，后端提供接口，因token有时效性故每次上传操做时需向后端请求；bash

// 文件 components/upload.vue
<template>
<!--省略业务代码-->
</template>
<script>
import axios from "~/plugins/axios";

export default {
  head: {
    script: [{ src: "http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js" }]//引入sdk
  },
  method:{
      doUpload() {
          const _this = this;
          const urls = [];
          this.loading = true;
          axios.get("/api/m/common/oss/getproperties") 
          .then(res=>{
            //向后端请求获取oss token等信息
              _this.ossKey.AccessKeyId = res.data.data.AccessKeyId;
              _this.ossKey.AccessKeySecret = res.data.data.AccessKeySecret;
              _this.ossKey.BucketName = res.data.data.BucketName;
              _this.ossKey.SecurityToken = res.data.data.SecurityToken;
              
            //与阿里oss交互，上传文件到服务器并返回文件路径
          })
      }
  }
<script>
<style>
/*省略样式代码*/
</style>
复制代码

步骤3:与阿里oss交互，上传文件到服务器并返回文件路径；服务器

//
postOss(){
    const _this = this;
    const client = new window.OSS.Wrapper({
        region: _this.region,
        accessKeyId: _this.ossKey.AccessKeyId,
        accessKeySecret: _this.ossKey.AccessKeySecret,
        stsToken: _this.ossKey.SecurityToken,
        bucket: _this.ossKey.BucketName
    });
    _this.percentage = 0;
    const files = document.getElementById(_this.id);
    if(files.files[0].size > _this.limitSize){//对文件大小进行校验超出弹出提示框
        _this.$Notice.warning({
            title: '舒适提示',
            desc:  '文件超出'+_this.limitSize/1024+'kb限制，请压缩一下图片再上传'
        });
        _this.loading = false;
        return false;
    }
    if (files.files) {
        const fileLen = document.getElementById(_this.id).files;
        let resultUpload = "";
        for (let i = 0; i < fileLen.length; i++) {
            const file = fileLen[i];
             // 随机命名
            let random_name ="mapOm/" + random_string(6) + "_" + new Date().getTime() + "." + file.name.split(".").pop();
              // 上传
            client.multipartUpload(random_name, file, {
                progress: function*(percentage, cpt) {
                    // 上传进度
                    _this.percentage = percentage;
                }
            })
            .then(results => {
                // 上传完成
                _this.loading = false;
                 _this.show = true;
                 const url = "" + results.name;
                 _this.url = url;
                _this.$emit('uploadedUrl',results.name);//把url传给父组件
            })
            .catch(err => {
                _this.loading = false;
                console.log(err);
            });
        }
    }
}
复制代码

步骤4:引用并使用组件；app

import uploadImg from '~/components/upload';//引入组件

<upload-img label="土壤温度" id="soilTemperature"
    @uploadedUrl="(url) => this.formItem.trend.soilTemperature = url"
    @remove="() => this.formItem.trend.soilTemperature = ''">
</upload-img>
复制代码

总结

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

系列文章连接

如下为本系列的文章合集，在此列出便于查阅：运维