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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: JS:Vue项目浏览器直接上传文件到阿里云OSS

OSS Browser.js SDK文档:

https://help.aliyun.com/document_detail/64041.html

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

将来源设置成 * 将Method设置成 GET, POST, PUT, DELETE, HEAD 将Allowed Header设置成 * 暴露Headers:设置为ETag、x-oss-request-id和x-oss-version-id

注意:暴露的headers没有设置,上传将会出现异常

安装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
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
13天前
|
DataWorks 安全 关系型数据库
DataWorks产品使用合集之同步数据到OSS时,文件的切分单位如何设置
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
1月前
|
分布式计算 大数据 MaxCompute
MaxCompute产品使用合集之使用pyodps读取OSS(阿里云对象存储)中的文件的步骤是什么
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
13天前
|
SQL 分布式计算 DataWorks
DataWorks产品使用合集之如何将CSV文件从阿里云OSS同步到ODPS表,并且使用列作为表分区
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
DataWorks产品使用合集之如何将CSV文件从阿里云OSS同步到ODPS表,并且使用列作为表分区
|
26天前
|
SQL 分布式计算 监控
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
本文演示了使用 EMR Serverless Spark 产品搭建一个日志分析应用的全流程,包括数据开发和生产调度以及交互式查询等场景。
56415 7
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
|
5天前
|
Java 对象存储
java对接阿里云OSS上传
java对接阿里云OSS上传
47 2
|
14天前
|
存储 DataWorks 关系型数据库
DataWorks产品使用合集之在使用数据集成中的同步任务从mysql同步表到oss,存储为csv时,最终生成的文件中没有表头,这个属性可以在哪里配置么
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
13天前
|
SQL 分布式计算 大数据
MaxCompute产品使用合集之是否可以对OSS文件进行谓词下推
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
26天前
|
存储 弹性计算 数据管理
【阿里云弹性计算】ECS实例的冷热数据管理:利用阿里云 OSS 与 ECS 的高效协同
【5月更文挑战第28天】阿里云ECS与OSS协同,实现弹性计算服务的高效数据管理。ECS处理热数据,OSS存储冷数据,降低存储成本,提升性能。通过自动化策略实现数据自动迁移,优化实例性能,适用于电商图片、日志存储等场景。注意迁移策略设置和数据安全,为企业带来更大价值和竞争力。
122 1
|
1月前
|
存储 弹性计算 数据库
阿里云oss备份网站数据的详细步骤
该教程指导如何使用阿里云OSS备份网站数据。首先,注册阿里云账号并购买40GB的OSS存储空间。创建Bucket,选择与服务器相同的区域和私有权限。安装阿里云OSS插件,获取AccessKey信息。在宝塔面板中设置计划任务进行网站或数据库备份,选择内网域名以节省流量。备份完成后,通过文件管理器检查OSS中是否有备份文件。下载备份文件需点击文件名,然后打开文件URL。
126 5
|
16天前
|
存储 运维 Serverless
Serverless 使用OOS将http文件转存到对象存储
阿里云OOS提供了一种高效、灵活的解决方案,用于自动化HTTP文件到对象存储的转存。通过OOS,用户可以使用函数计算FC执行Python脚本,直接将文件从HTTP源转移到OSS,无需本地存储或额外ECS实例,降低了成本,提高了效率,并减少了错误。实践步骤包括创建OOS模板并在FC上运行。使用此功能需开通FC服务,创建RAM角色并授权访问OSS。附录中提供了示例模板和Python脚本说明。
58 0

热门文章

最新文章