ios 上传图片到阿里云的oss_vue element-ui直传视频到阿里云oss

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: 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);            }          );      });    });  }};

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页面中的使用

上传视频文件，且不超过500mb

6.js中的代码

7.css代码

8.总结

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

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

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

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

图片来源于网络