JS:Vue项目浏览器直接上传文件到阿里云OSS

OSS Browser.js SDK文档:
https://help.aliyun.com/document_detail/64041.html

OSS设置路径:权限管理-跨域设置

将来源设置成 *
将Method设置成 GET, POST, PUT, DELETE, HEAD
将Allowed Header设置成 *
将Expose Header设置成 etag

安装JDK

npm install ali-oss -S

oss文件上传

let OSS = require("ali-oss");

// 配置OSS参数
let client = new OSS({
  // region以杭州为例(oss-cn-hangzhou),其他region按实际情况填写。
  region: "<Your region>",
  // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
  accessKeyId: "<Your AccessKeyId>",
  accessKeySecret: "<Your AccessKeySecret>",
  bucket: "Your bucket name",
});

// 基本链接
const BASE_URL = "http://demo.oss-cn-beijing.aliyuncs.com/";

/**
 *
 * @param filepath  文件存储路径
 * @param file 文件对象
 * @param progress  上传进度回调函数
 */
export async function uploadObject(filepath, file, progress) {
  let result = await client.multipartUpload(filepath, file, { progress });

  if (result.res.status == 200) {
    return BASE_URL + filepath;
  }
}

进度条回调函数

function handleProgress(p) {
  console.log((p * 100).toFixed(2));
}

用到的文件助手函数 file-utils.js

let moment = require("moment");
const md5 = require("js-md5");

/**
 * 以当前时间戳做md5为文件名并拼接上原有扩展名
 * @param {*} filename
 */
function getFilename(filename) {
  // 扩展名
  let ext = filename.split(".").slice(-1)[0];
  // 文件名
  let name = md5(new Date().getTime().toString()) + "." + ext;

  return name;
}

/**
 * 按照年月存静态资源
 * @param {*} dirname, filename
 */
function getFilepath(dirname, filename) {
  let day = moment().format("YYYY-MM");
  // 文件路径
  let fullname = dirname + "/" + day + "/" + filename;
  return fullname;
}


filename = "demo.txt";
dirname = "media";

fullname = getFilename(filename)
console.log(fullname);
// 2654231108e34b9dd7e4670e7049caea.txt

filepath = getFilepath(dirname, fullname)
console.log(filepath);
// media/2020-11/2654231108e34b9dd7e4670e7049caea.txt
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页