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

简介: 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快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
相关文章
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
926 156
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
464 63
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
612 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
349 5
在浏览器执行js脚本的两种方式
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
2264 1
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
791 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
3622 1
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
1180 1
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
1200 1