vue element-ui的直传视频到阿里云oss（亲测有效）

1. 最近我们公司在做一个官网涉及到图片视频上传的问题，，时间比较紧急（实际后端想偷懒），就让我直传视频到阿里云的oss上。我一听，也是一脸懵逼，人在家中坐，锅从天上来。
   
   话不多说，我直冲度娘，网上的案例真的是非常的多，眼花缭乱，我也试了几个发现都是有问题的，又联系不到博主，最终我还是放弃了，干脆自己搞一个吧，经过三天三夜的奋战（其实是一晚上）！
   所以分享出来给各位小伙伴们，希望早日脱坑！
   

这个是效果图，因为我后台用的是vue所以说为了方便就直接用element ui了，样式在下面，可以根据自己的需求更改。

阿里oss的安装

npm install ali-oss --save

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

 "use strict";
import { dateFormat } from './utils.js'

var OSS = require("ali-oss");
let 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: "XXXXX", // 请设置成你的
        accessKeyId: "XXXXX", // 请设置成你的
        accessKeySecret: "XXXXX", // 请设置成你的
        bucket: "XXXXX", // 请设置成你的
        secure: true // 上传链接返回支持https
      });
      resolve(client);
    });
  },
  /**
   * 文件上传
   * @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
   */
  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);
            }
          );
      });
    });
  }
};

在src下的util文件创建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;
};

vue页面中的使用

 <template>
    <div>
            <el-form :model="form" label-width="80px" size="small">
                <el-form-item label="上传视频">
                    <el-upload  class="upload-demo" action=""
                               :http-request="fnUploadRequest"
                               :show-file-list="true"
                               :limit=1
                               :on-exceed="beyondFile"
                               :on-success="handleVideoSuccess"
                               :before-upload="beforeUploadVideo">
                        <div tabindex="0" class="el-upload-video">
                            <i class="el-upload-video-i el-icon-plus avatar-uploader-icon"></i>
                        </div>
                        <div class="el-upload__tip" slot="tip">上传视频文件，且不超过500mb</div>
                    </el-upload>
					 <el-input type="textarea" rows="5" v-model="urls"></el-input>
                </el-form-item>
            </el-form>
    </div>
</template>

js中的代码

 <script>
  import oss from '../../util/oss.js'
 
  export default {
    data: function() {
      return {
        form: {
          status: true
        },
		url:[],
		urls:''
      }
    },
    methods: {
      /**
       * @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]
       * @param    {object}   option [上传选项]
       * @return   {null}   [没有返回]
       */
      async fnUploadRequest(option) {
        oss.ossUploadFile(option);
      },
      // 视频上传
      beforeUploadVideo(file) {
        // todo
      },
      // 视频上传成功后
      handleVideoSuccess(response, file, fileList) {
		 console.log('url',window.url);
		  console.log('url',window.url.res.requestUrls);
		 this.url = window.url.res.requestUrls;
		 console.log('3322',this.url.length)
		  for(var i = 0;i<this.url.length;i++){
			  console.log('href',this.url[i])
			  this.urls = this.url[i].split('?')[0]
			  console.log('jjjj',this.url)
		  }
        // todo
      },
      // 视频添加多个视频文件事件
      beyondFile(files, fileList) {
      },
    }
  }
</script>

css代码

<style lang="less" scoped>
    .el-upload-video {
        width: 100px;
        height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload-video-i{
        font-size: 36px;
        padding-top: 25px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>

代码我已经贴完了，如果是你的oss没有配置好的话，就会出现跨域等一系列的问题。但是这个都不是大问题，度娘又很多关于阿里云或者是七牛云的相关配置，我在这里就不多啰嗦了，有什么问题的话，可以留言。老板叫我了，我得改bug去了。