前端上传图片至OSS

环境:VUE3+NODEJS16
一、第一步肯定是引入依赖
在package.json文件中的dependencies加上"ali-oss": "^6.17.1"如下代码所示:

 //加入后的整体展示"dependencies": {"ali-oss": "^6.17.1"},

然后在控制台执行npm installyarn install,执行命令后依赖安装成功。
二、创建一个js文件,如:aliOss.js
文件代码如下:

const OSS = require('ali-oss')
const path = require("path")const client = new OSS({// yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。region: 'yourregion',// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。accessKeyId: 'yourAccessKeyId',accessKeySecret: 'yourAccessKeySecret',// 填写Bucket名称。bucket: 'examplebucket',
});const headers = {// 指定Object的存储类型。'x-oss-storage-class': 'Standard',// 指定Object的访问权限。'x-oss-object-acl': 'private',// 通过文件URL访问文件时,指定以附件形式下载文件,下载后的文件名称定义为example.jpg。// 'Content-Disposition': 'attachment; filename="example.jpg"'// 设置Object的标签,可同时设置多个标签。'x-oss-tagging': 'Tag1=1&Tag2=2',// 指定PutObject操作时是否覆盖同名目标Object。此处设置为true,表示禁止覆盖同名Object。'x-oss-forbid-overwrite': 'true',
};async function put () {try {// 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。// 如果本地文件的完整路径中未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件。const result = await client.put('exampleobject.txt', path.normalize('D:\\localpath\\examplefile.txt')// 自定义headers//,{headers});console.log(result);} catch (e) {console.log(e);}
}

三、在其他页面中引入aliOss.js,并调用上传方案,代码如下:

import { put } from "@/utils/aliOSS.js";//file是文件对象put(`路径名称/文件名称`, file).then((res) => {//res.url上传成功的地址console.log(res.url, "put");// 上传成功之后,转换真实的地址// signatureUrl(`fridgeAdmin/${objName}`).then((res) => {//   console.log(res, "signatureUrl");// });});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/638283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Delphi 基础知识 22】TStringList 的详细用法

文章目录 TStringList 与TStrings的区别TStringList 常用方法与属性 TStringList 类在Delphi中会经常使用到,我们这里一起来看看 TStringList 的详细用法. TStringList 与TStrings的区别 TStringList 和 TStrings 都是 Delphi 编程语言中用于处理字符串列表的类。它…

Win10升级Win11后卡顿了?

目录 关闭动画效果 任务栏居中改为居左 调整外观和性能 其他 当你看到最后,还知道哪些升级WIN11后必做的优化呢?欢迎在评论区分享出来!❤️ win11上市目前也有一段时间了,想必很多大家都已经进行更新了。新的系统确实更加简洁…

安规电容的知识

1、常见安规电容有哪些? 一般我们所说的安规电容也就有两种,一种就是X安规电容(X1/X2/X3安规电容),还有一种是Y电容(最常见的是Y1和Y2安规电容)。 2、x电容的位置 火线零线间的是X电容。x电容用…

Git将某个文件合并到指定分支

企业开发中&#xff0c;经常会单独拉分支去做自己的需求开发&#xff0c;但是某些时候一些公共的配置我们需要从主线pull&#xff0c;这时候整个分支merge显然不合适 1.切换至待合并文件的分支 git checkout <branch>2.将目标分支的单个文件合并到当前分支 git checkou…

力扣刷MySQL-第三弹(详细讲解)

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…

JVM中的垃圾收集算法

标记-清除算法 首先标记出所有需要回收的对象&#xff0c;在标记完成后&#xff0c;统一回收掉所有被标记的对象&#xff0c;也可以反过来&#xff0c;标记存活的对象&#xff0c;统一回收所有未被标记的对象。标记过程就是对象是否属于垃圾的判定过程 缺点 第一个是执行效率…

【算法基础 数学】快速幂求逆元(逆元、扩展欧几里得定理、小费马定理)

文章目录 为什么需要逆元逆元的概念1.单位元2.逆元3.模乘的单位元4.模乘的逆元 开始求逆元1.扩展欧几里得定理2.费马小定理 原文链接 为什么需要逆元 首先&#xff0c;在算法竞赛中&#xff0c;很多情况下会遇到数值很大的数据&#xff0c;这个时候&#xff0c;题目往往会让我…

C# 获取QQ会话聊天信息

目录 利用UIAutomation获取QQ会话聊天信息 效果 代码 目前遇到一个问题 其他解决办法 利用UIAutomation获取QQ会话聊天信息 效果 代码 AutomationElement window AutomationElement.FromHandle(get.WindowHwnd); AutomationElement QQMsgList window.FindFirst(Tr…

4.postman批量运行及json、cvs文件运行

一、批量运行collection 1.各个接口设置信息已保存&#xff0c;在collection中点击run collection 2.编辑并运行集合 集合运行时&#xff0c;单独上传图片时报错。需修改postman设置 二、csv文件运行 可新建记事本&#xff0c;输入测试数据&#xff0c;后另存为新的文本文件&…

Pytest 结合 Allure 生成测试报告

测试报告在项目中是至关重要的角色&#xff0c;一个好的测试报告&#xff1a; 可以体现测试人员的工作量&#xff1b; 开发人员可以从测试报告中了解缺陷的情况&#xff1b; 测试经理可以从测试报告中看到测试人员的执行情况及测试用例的覆盖率&#xff1b; 项目负责人可以通过…

c#之函数

1. 定义一个函数,用来取得数字的和,但是数字的个数不确定 (1) class Program{static int Sum(int[] array){int num 0;for (int i 0; i < array.Length; i){num num array[i];}return num;}static void Main(string[] args){int sum Sum(new int[]{12,13,34,5,68,9,9…

echarts-wordcloud词云

echarts-wordcloud是基于echarts的一个插件&#xff0c;所以我们要首先安装echarts包&#xff0c;然后再安装echarts-wordcloud的包&#xff0c;这里我的练习项目安装的版本&#xff1b;当然&#xff0c;你可以随意安装你需要的版本&#xff1b; “echarts”: “^5.3.3”, “ec…

Hive架构设计

我们知道MapReduce和Spark它们提供了高度抽象的编程接口便于用户编写分布式程序,它们具有极好的扩展性和容错性,能够处理超大规模的数据集。这些计算引擎提供了面向高级语言(比如Java,Python等)的编程接口,然而,考虑到分布式程序编写的复杂性,直接使用这些编程接口实现…

Django中解决跨域问题

同源策略&#xff08;Same origin policy&#xff09;是一种约定&#xff0c;它规定了 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同&#xff0c;如果不一致&#xff0c;请求会发送成功&#xff0c;后端会正常响应&#xff0c;但是浏览器会拦截 …

面试2024.1.20

简单介绍下你做的项目。 这个神领物流项目是一个前后端分离的项目&#xff0c;前段他有3个客户端&#xff08;用户端为微信小程序、司机端和快递员端为app&#xff09;一个管理端&#xff08;pc&#xff09;&#xff0c;后端用的技术栈用的是SpringAlibabaCloud、数据库用的是M…

【精选】中间件 tomcat漏洞复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

JRTP实时音视频传输(2)-使用TCP通信的案例

环境搭建等参考&#xff1a;JRTP实时音视频传输(1)-必做的环境搭建与demo测试 1.创建自己的demo 先将example1拷贝为myclienttcp.cpp和myservertcp.cpp cp example1.cpp myclienttcp.cpp cp example1.cpp myservertcp.cpp 改写jrtplib/JRTPLIB/examples/CMakeLists.txt&…

79、avx2 向量指令集优化卷积运算

上一节 介绍了 avx2 向量指令集中的 load/store 操作,本节介绍如何使用 avx2 的向量指令集来实现乘累加运算。 因为我们实战中用到的 resnet50 神经网络中,卷积运算在整个模型中的比例占据是相当高,而卷积运算的核心计算就是乘累加计算。因此,只要将最核心的乘累加计算效率…

2024成都线路板展览会|全国线路板展

时 间&#xff1a;2024年7月17&#xff5e;19日 地 点&#xff1a;成都世纪城新国际会展中心 ◆ 》》》展会概况&#xff1a; 电路板是电子产品的关键电子互联件&#xff0c;被誉为“电子产品之母”。电路板行业作为电子信息产业中重要的组成部分&#xff0c;受到国家产…

怎么从视频中提取动图?一个方法快速提取gif

视频以连续的方式播放一系列图像帧&#xff0c;通过每秒播放的帧数&#xff08;帧率&#xff09;来创做&#xff0c;由于GIF动图则以循环播放一系列静态图像帧的方式展现动画效果。由于视频的优势在于流畅的动画、丰富的细节和长时间播放&#xff0c;因此常用于电影、电视节目、…