1.需求

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

先上效果图

2.阿里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:    */  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);            }          );      });    });  }};

4.在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;};

5.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>

6.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>

7.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>

8.总结

我在这里讲一下需要注意的几点：

1.这个我没有贴出阿里云的一些配置，自己可以问问度娘，网上有很多资料，注意跨域的配置就行。

2.这样做的优点就是不用和后端交互，图片直传到你阿里云的oss然后返回链接，不需要后端的传值，省去了很多和后端人员联调的时间，大大提高了开发的效率。

代码我已经都贴出来了，样式的话可以自己改，这个是可以根据自己的需求来更改的，如果还有什么问题的话，欢迎留言评论！

图片来源于网络