VUE上传OSS前端实现直传阿里云

      设置阿里云oss

• 设置读写权限以及跨域设置

• 

  

  跨域设置详情（可以根据自己的需求设置）

• 

  阿里云oss配置完毕  vue安装oss组件

• npm install ali-oss

  创建工具类 oss.js 这个工具放在项目的src/utils目录中（oss.js文件配置oss连接信息以及上传的方法）

• oss.js代码

• 'use strict'
  import { dateFormat } from './utils.js'
  var OSS = require('ali-oss')
  const url = ''
  
  export default {
    /**
     * 创建随机字符串
     * @param num
     * @returns {string}
     */
    randomString(num) {
      const 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) => {
        const client = new OSS({
          region: 'xx', // 请设置成你的路径地址
          accessKeyId: 'xx', // 请设置成你的
          accessKeySecret: 'xx', // 请设置成你的
          bucket: 'xx', // 请设置成你的
          secure: true // 上传链接返回支持https
        })
        resolve(client)
      })
    },
    /**
     * 文件上传
     */
    ossUploadFile(option) {
      const file = option.file
      const self = this
      // var url = '';
      return new Promise((resolve, reject) => {
        const date = dateFormat(new Date(), 'yyyyMMdd') // 当前时间
        const dateTime = dateFormat(new Date(), 'yyyyMMddhhmmss') // 当前时间
        const randomStr = self.randomString(4) //  4位随机字符串
        const extensionName = file.name.substr(file.name.indexOf('.')) // 文件扩展名
        const fileName = 'video/' + date + '/' + dateTime + '_' + randomStr + extensionName // 文件名字（相对于根目录的路径 + 文件名）
        // 执行上传
        self.createOssClient().then(client => {
          // 异步上传,返回数据
          resolve({
            fileName: file.name,
            fileUrl: fileName
          })
          // 上传处理
          // 分片上传文件
          client
            .multipartUpload(fileName, file, {
              progress: function(p) {
                const e = {}
                e.percent = Math.floor(p * 100)
                // console.log('Progress: ' + p)
                option.onProgress(e)
              }
            })
            .then(
              val => {
                window.url = val
                console.info('woc', url)
                if (val.res.statusCode === 200) {
                  option.onSuccess(val)
                  return val
                } else {
                  option.onError('上传失败')
                }
              },
              err => {
                option.onError('上传失败')
                reject(err)
              }
            )
        })
      })
    }
  }
  

  utils.js代码

• /**
   * 时间日期格式化
   * @param format
   * @returns {*}
   */
  export const dateFormat = function(dateObj, format) {
    const 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 (const 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
  }
  
  

• 以上配置完毕后页面开始调用

• import oss from '@/utils/oss';

   

• 在vue页面中使用element UI组件上传

• <el-upload
            :on-preview="handlePictureCardPreview"
            :on-success="getVideoUrl"
            :limit="1"
            :http-request="fnUploadRequest"
            :before-upload="beforeAvatarUpload2"
            :auto-upload="true"
            action=""
            list-type="picture-card"
            class="avatar-uploader"
          >
            <i class="el-icon-plus" />
  </el-upload>

   methods: {
      async fnUploadRequest(option) {
        oss.ossUploadFile(option);
      },
      getVideoUrl(response, file, fileList) {
        this.url = window.url.res.requestUrls;
        console.log('视频数量', this.url.length);
        for (var i = 0; i < this.url.length; i++) {
          console.log('打印下标', this.url[i]);
          this.urls = this.url[i].split('?')[0];
          console.log('视频路径', this.urls);
        }
        this.$message({
          type: 'success',
          message: '上传成功'
        });
       
      }
    }

  可以在方法中获取上传的路径地址在保持到数据