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
相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
相关文章
|
2月前
|
存储 人工智能 Cloud Native
阿里云渠道商:OSS与传统存储系统的差异在哪里?
本文对比传统存储与云原生对象存储OSS的架构差异,涵盖性能、成本、扩展性等方面。OSS凭借高持久性、弹性扩容及与云服务深度集成,成为大数据与AI时代的优选方案。
|
4月前
|
存储 运维 安全
阿里云国际站OSS与自建存储的区别
阿里云国际站对象存储OSS提供海量、安全、低成本的云存储解决方案。相比自建存储,OSS具备易用性强、稳定性高、安全性好、成本更低等优势,支持无限扩展、自动冗余、多层防护及丰富增值服务,助力企业高效管理数据。
|
4月前
|
存储 域名解析 前端开发
震惊!不买服务器,还可以用阿里云国际站 OSS 轻松搭建静态网站
在数字化时代,利用阿里云国际站OSS可低成本搭建静态网站。本文详解OSS优势及步骤:创建Bucket、上传文件、配置首页与404页面、绑定域名等,助你快速上线个人或小型业务网站,操作简单,成本低廉,适合初学者与中小企业。
|
6月前
|
Web App开发 监控 安全
OSS客户端签名直传实践:Web端安全上传TB级文件方案(含STS临时授权)
本文深入解析了客户端直传技术,涵盖架构设计、安全机制、性能优化等方面。通过STS临时凭证与分片上传实现高效安全的文件传输,显著降低服务端负载与上传耗时,提升系统稳定性与用户体验。
587 2
|
10月前
|
消息中间件 监控 数据挖掘
【有奖实践】轻量消息队列(原 MNS)订阅 OSS 事件实时处理文件变动
当你需要对对象存储 OSS(Object Storage Service)中的文件变动进行实时处理、同步、监听、业务触发、日志记录等操作时,你可以通过设置 OSS 的事件通知规则,自定义关注的文件,并将 OSS 事件推送到轻量消息队列(原 MNS)的队列或主题中,开发者的服务即可及时收到相关通知,并通过消费消息进行后续的业务处理。
215 93
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
1427 2
JS上传文件(base64字符串和二进制文件流)
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
258 2
|
10月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
428 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
SQL 分布式计算 Serverless
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
246 0

热门文章

最新文章