vue el-upload直传阿里云oss

1.首先,node中安装ali-oss

npm install ali-oss

2.封装oss通用上传js工具类

aliOss.js 工具类

'use strict'
import Utils from './utils'

var OSS = require('ali-oss')

export default {

  /**
   * 创建随机字符串
   * @param num
   * @returns {string}
   */
  randomString (num) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
    let res = ''
    for (let i = 0; i < num; i++) {
      var id = Math.ceil(Math.random() * 35)
      res += chars[id]
    }
    return res
  },

  /**
   * 创建oss客户端对象
   * @returns {*}
   */
  createOssClient () {
    return new Promise((resolve, reject) => {
      let client = new OSS({
        region: 'oss-cn-hangzhou',
        accessKeyId: '*',
        accessKeySecret: '*',
        bucket: '*'
      })
      resolve(client)
    })
  },
  /**
   * 文件上传
   * @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
   */
  ossUploadFile (option) {
    let file = option.file
    const self = this
    return new Promise((resolve, reject) => {
      let date = Utils.dateFormat(new Date(), 'yyyyMMdd') // 当前时间
      let dateTime = Utils.dateFormat(new Date(), 'yyyyMMddhhmmss') // 当前时间
      let randomStr = self.randomString(4)//  4位随机字符串
      let extensionName = file.name.substr(file.name.indexOf('.')) // 文件扩展名
      let fileName = 'video/' + date + '/' + dateTime + '_' + randomStr + extensionName // 文件名字（相对于根目录的路径 + 文件名）
      // 执行上传
      self.createOssClient().then(client => {
        // 异步上传,返回数据
        resolve({
          fileName: file.name,
          fileUrl: fileName
        })
        // 上传处理
        // 分片上传文件
        client.multipartUpload(fileName, file, {
          progress: function (p) {
            let e = {}
            e.percent = Math.floor(p * 100)
            // console.log('Progress: ' + p)
            option.onProgress(e)
          }
        }).then((val) => {
          // console.info(val)
          if (val.res.statusCode === 200) {
            option.onSuccess(val)
            return val
          } else {
            option.onError('上传失败')
          }
        }, err => {
          option.onError('上传失败')
          reject(err)
        })
      })
    })
  }
}

utils.js工具类

/**
 * 工具类
 */
export default {
  /**
   * 时间日期格式化
   * @param format
   * @returns {*}
   */
  dateFormat (dateObj, format) {
    let date = {
      'M+': dateObj.getMonth() + 1,
      'd+': dateObj.getDate(),
      'h+': dateObj.getHours(),
      'm+': dateObj.getMinutes(),
      's+': dateObj.getSeconds(),
      'q+': Math.floor((dateObj.getMonth() + 3) / 3),
      'S+': dateObj.getMilliseconds()
    }
    if (/(y+)/i.test(format)) {
      format = format.replace(RegExp.$1, (dateObj.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let k in date) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(RegExp.$1, RegExp.$1.length === 1
          ? date[k] : ('00' + date[k]).substr(('' + date[k]).length))
      }
    }
    return format
  }
}

3.vue中的具体使用

<el-upload action=""
                     :http-request="fnUploadRequest"
                     :show-file-list="true"
                     :limit=1
                     :on-exceed="beyondFile"
                     :on-success="handleVideoSuccess"
                     :before-upload="beforeUploadVideo">
            <span class="buttomStyle">上传视频</span>
</el-upload>

<script>
  import oss from '../../../utils/aliOss'
export default {
methods: {
  /**
       * @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]
       * @param    {object}   option [上传选项]
       * @return   {null}   [没有返回]
       */
      async fnUploadRequest (option) {
        oss.ossUploadFile(option)
      },
      // 视频上传
      beforeUploadVideo (file) {
         //todo
      },
      // 视频上传成功后
      handleVideoSuccess (response, file, fileList) {
        //todo
      },
      // 视频添加多个视频文件事件
      beyondFile (files, fileList) {
         //todo
      }
}
}