vue 封装使用ali-oss上传图片

import { get } from "../axios/axiosType"
import OSS from "ali-oss";
import { uuid } from "vue-uuid";

/*
 * type 上传路径类型
 * file 上传文件
 * progress 进度条回调
 * */
export function aliOssUpload(type, file, progress) {
  return new Promise((resolve, reject) => {
    // 成功后返回图片信息
    let image = {
      title: file.name,
      url: "",
      width: "",
      height: "",
      pictureMd5: "",
    }
    /*
     * 创建Image获取图片宽高
     * */
    const URL = window.URL || Window.webkiURL
    let img = new Image()
    img.onload = function (e) {
      image.width = this.width
      image.height = this.height
    }
    img.src = URL.createObjectURL(file)
    get("/common/returnOssToken?type=" + type).then((res) => {
      if(res.code == 0) {
        let OssData = res.data
        let client = new OSS({
          region: "oss-cn-hangzhou",// 服务器所在地区
          bucket: "lq-usr-pic",// 阿里云对应bucket名称
          accessKeyId: OssData.accessKeyId,// oss对应令牌id
          accessKeySecret: OssData.accessKeySecret,// oss对应令牌密钥
          stsToken: OssData.securityToken,// oss对应令牌token
        });
        // OssData.path 文件上传路径
        let name = OssData.path + uuid.v4() + ".jpg"
        /*
         * name 图片路径/名称
         * file 图片file文件
         * */
        client.multipartUpload(name, file, {
          progress: function (pro) {
            //获取进度条的值
            progress(Math.floor(pro * 100))
          },
        }).then(function (res) {
          image.url = "http://img.0q.design/" + res.name
          image.pictureMd5 = JSON.parse(res.etag)
          resolve(image)
        }).catch((err) => {
          reject(err);
        })
      } else {
        reject(res);
      }
    }).catch((err) => {
      reject(err);
    });
  });
}