Vue+NodeJS上传图片到腾讯云Cos

一.前端Vue

1.选择图片

--HTML
<input type="file" accept="image/*" @change="handleFileChange">
<el-button  size="large" @click="changeAvatar">上传头像</el-button>
//选择图片
function handleFileChange(event){const selectedFile = event.target.files[0];if (!selectedFile) {return;}//定义图片可传入的类型const allowedTypes = ['image/jpeg', 'image/png','image/jpg'];//定义图片的最大尺寸--字节const maxSize = 1000000; if (!allowedTypes.includes(selectedFile.type)) {return;}if (selectedFile.size > maxSize) {return;}}

2.实现上传前的本地预览

--HTML
<img  style="border-radius: 50%;"  :src="DataUrl" alt="">
//定义数据
const DataUrl=ref('')function handleFileChange(event){
//图片大小,类型验证
......//读取数据
const reader=new FileReader()
reader.onload=e=>{DataUrl.value=e.target.result}
reader.readAsDataURL(selectedFile)}

此时读取后得到的是

后面包含base64,将base64上传到后端进行处理 ,如果图片文件稍大,后端就会出现请求体过长的错误.不适合大文件上传.我们这里就只用它来做本地预览

3.获取上传到后端必须的数据

//定义数据
const imgType=ref('')
const code=ref({}) function handleFileChange(event){
//图片大小,类型验证
......//得到图片的类型后缀
const index=selectedFile.type.indexOf('/')
imgType.value=selectedFile.type.slice(index+1)
//包括开始,不包括结尾//selectedFile--图片对象
code.value=selectedFile//读取数据
...}

4.上传图片

async function changeAvatar(){const formData = new FormData();formData.append('image',code.value); //图片对象formData.append('fileType', imgType.value); // 添加文件类型信息await axios.post('http://127.0.0.1:3000/upload',formData).then((response) => {// 处理后端的响应console.log('上传成功',response );}).catch((error) => {// 处理上传失败的情况console.error('上传失败', error);});
}

二.后端

后续需要的第三方包

npm i expressnpm i cos-nodejs-sdk-v5npm i corsnpm i multernpm i dotenv
"cors": "^2.8.5","cos-nodejs-sdk-v5": "^2.12.4","dotenv": "^16.3.1","express": "^4.18.2","multer": "^1.4.5-lts.1",

1.express服务搭建

const express = require('express')			
const cors = require('cors');	
const multer = require('multer'); // 处理文件上传的中间件		
const app = express()
app.use(cors()) //跨域处理// 配置文件上传的存储路径和文件名
const storage = multer.memoryStorage(); // 在内存中处理文件上传
const upload = multer({ storage });//COS图片上传请求
router.post('/upload', upload.single('image'), async(req, res) => {const uploadedImage = req.file;const fileType = req.body.fileType; // 从请求体中获取文件类型if (!uploadedImage) {return res.status(400).send('没有上传文件');}const avatar_url=await uploadImage(req.file,fileType)res.send({data:{avatar_url}})
});app.listen(3000, () => {console.log('server running ...');})

2.上传到腾讯云Cos

const COS = require('cos-nodejs-sdk-v5')
const {SecretId,SecretKey,Bucket,Region}=require('../config')const cos = new COS({SecretId,SecretKey,
})const path="avatar/"  //腾讯云Cos桶下的文件夹async function uploadImage(img,type) {try {const data = await cos.putObject({Bucket, // 存储桶名称Region, // 存储桶所在地域Key:path + new Date().getTime()+`.${type}`, // 可以理解为图片存储的路径+名称(唯一) 例如:indexImages/1670050961361.pngBody: img.buffer, // 上传文件的内容,可以为 FileStream、字符串、Buffer, 我们这里接收二进制BufferonProgress: function (progressData) {console.log(progressData)}})const imageUrl = `https://${data.Location}`return imageUrl}catch (error) {console.log(error)}}module.exports = uploadImage

3.配置文件

新建一个.env文件

# COS
SecretId='密钥ID'
SecretKey='密钥'
Bucket='桶名称'
Region='所在地域'

新建一个config.js文件

const dotenv = require("dotenv")dotenv.config()module.exports = {SecretId,SecretKey,Bucket,Region,
} = process.env

到此Vue上传图片到COS就完成了,后续可以将图片链接存到数据库进行操作.代码有错误的地方欢迎指正.如果使用出现错误也可留言.同时也要注意你的COS权限开放问题

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

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

相关文章

ubuntu22.04 设置网卡开机自启

配置文件路径 在Ubuntu中&#xff0c;网络配置文件通常位于/etc/netplan/目录下&#xff0c;其文件名以.yaml为后缀。Netplan是Ubuntu 17.10及更高版本中默认的网络配置工具&#xff0c;用于配置网络接口、IP地址、网关、DNS服务器等。 我们可以看到配置文件为 01-network-ma…

48、springboot 的国际化之让用户在程序界面上弄个下拉框,进行动态选择语言

上一篇是直接改浏览器的支持语言。 在浏览器上面直接改国际化语言 这次要实现的功能是直接在程序界面动态选择语言。 Locale 代表语言、国家。 ★ 在界面上动态改变语言 应用之所以能动态呈现不同的语言界面&#xff0c;其实关键在于如何确定客户端的Locale&#xff08;代…

Powershell模拟实现Linux下的tree命令

Powershell模拟实现Linux下的tree命令 代码 环境&#xff1a; P o w e r s h e l l 7 Powershell\ 7 Powershell 7 function Get-Tree {param([string]$directory ".",[int]$d 1,[switch]$f)$absolutePath Resolve-Path -Relative $directoryWrite-Host $absol…

Java复习-26-枚举

枚举&#xff08;替换多例设计&#xff09; 目的&#xff08;使用场景&#xff09; 不用也没啥 定义一个描述性别的类&#xff0c;那么该对象只有两个:男、 女。或者描述颜色基色的类&#xff0c;可以使用: 红色、绿色、蓝色。 功能 用于定义有限个数对象的一种结构&#x…

Hugging News #0904: 登陆 AWS Marketplace

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

Python库-coverage测试覆盖率

Coverage.py 是用于测量Python程序代码覆盖率的工具。它 监视程序&#xff0c;注意代码的哪些部分已执行&#xff0c;然后 分析源以识别可以执行但未执行的代码。 覆盖率测量通常用于衡量测试的有效性。它 可以显示测试正在执行代码的哪些部分&#xff0c;以及哪些部分是 不。…

掌握API数据检索:过滤和排序的综合指南

API可以返回大量的数据&#xff0c;这使得开发人员很难只检索他们需要的信息。这就是API的过滤和排序功能的用武之地。 过滤和排序是API设计的两个基本功能&#xff0c;它们允许开发人员有效地从API检索特定的数据。过滤使开发人员能够通过指定返回的数据必须满足的标准来缩小A…

javaee spring 测试aop 切面

切面类 package com.test.advice;import org.aspectj.lang.ProceedingJoinPoint;//增强类 public class MyAdvice {//将这个增强方法切入到service层的add方法前public void before(){System.out.println("添加用户之前");}}目标类 package com.test.service;publi…

[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能

系列文章目录 第一章 定制上中下&#xff08;顶部菜单、底部区域、中间主区域显示&#xff09;三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 [第五…

探索 Wall-E 的寻路算法

几年前,Yandex 组织了一场名为“机器人快递员”的竞赛,并提供了诱人的奖品:一张参加专业人士封闭式自动驾驶会议的门票。该竞赛类似于一场游戏,参与者的任务是在地图上找到最佳路线并使用机器人快递员优化送货。 当我深入研究这个主题时,我发现尽管路线查找问题已经解决,…

【MongoDB】Ubuntu22.04 下安装 MongoDB | 用户权限认证 | skynet.db.mongo 模块使用

文章目录 Ubuntu 22.04 安装 MongoDB后台启动 MongoDBshell 连入 MongoDB 服务 MongoDB 用户权限认证创建 root 用户开启认证重启 MongoDB 服务创建其他用户查看用户信息验证用户权限删除用户 skynet.db.mongo 模块使用authensureIndexfind、findOneinsert、safe_insertdelete、…

服务器分析和监控

在当今数字化时代&#xff0c;对于网络流量的分析和监控变得越来越重要。本文将详细介绍如何利用HTTPS代理服务器来实现高效、安全且可靠的流量分析与监控功能&#xff0c;并提供具体操作步骤以及相关技巧。无论是企业需要优化网络性能还是个人用户&#xff0c;在遵循法规合规前…

Android列表片段

下面创建第二个片段WorkoutFragment&#xff0c;它包含不同训练项目构成的一个列表&#xff0c;用户可以从这个列表中选择训练项目。 列表视图是只包含一个列表的片段 列表片段是一种专门处理列表的片段&#xff0c;它会自动绑定到一个列表视图&#xff0c;所以不需要另外创建…

利用procrank和lsof定位出客户软件内存OOM的问题

最近遇到一些事情&#xff0c;觉得挺憋屈的&#xff0c;可是再憋屈总得往前走吧&#xff01;打工人&#xff0c;不好办啊&#xff01;事情是这样的&#xff0c;笔者在芯片原厂负责SDK和行业解决方案输出的&#xff0c;可以理解成整体SDK turnkey方案。但是有些客户多少还要改一…

软件测试/测试开发丨ChatGPT:带你进入智能对话的新时代

简介 人工智能时代来临 我们正处于AI的iPhone时刻。——黄仁勋&#xff08;英伟达CEO&#xff09; ChatGPT 好得有点可怕了&#xff0c;我们距离危险的强人工智能不远了。——马斯克&#xff08;Tesla/SpaceX/Twitter CEO&#xff09; 以上的内容说明我们现在正处于一个技术大…

C# Solidworks二次开发:创建草图文本和创建草图中心线API详解

今天要介绍的是关于如何创建草图文本的API以及创建草图中心线的API&#xff0c;同时把一些连带的API也会和大家介绍一下&#xff0c;依然是满满的干货。 &#xff08;1&#xff09;创建草图文本API&#xff0c;InsertSketchText() 这个API的输入参数如下图所示&#xff1a; 一…

RC-u4 相对论大师(bfs求解指定路径)

PTA | 程序设计类实验辅助教学平台 题解&#xff1a; bfs可以求解从根节点到叶子节点的指定路径&#xff0c;这里的vis[]不是为了防止访问到父节点&#xff0c;更多的是为了缩小路径长度&#xff0c;mpp和mp的映射也很巧妙&#xff0c;开始我用的还是map<pair<string,s…

在ros下使用iai_kinect2

source ~/catkin_ws/devel/setup.bash 1、roscore 2、roslaunch kinect2_bridge kinect2_bridge.launch 注意设置launch文件 3、rosrun kinect2_viewer kinect2_viewer 这时候就可以看见rgbd的图像 如何标定&#xff1f;如何建立地图&#xff1f;

Android文件关联

用户需求:Android在系统文件夹找到一个文件想发送自己开发的app进行处理该怎么办? 这时候可以采用两个Activity,一个Activity用作Launcher,一个用于处理发送的文件;具体Activity intent-filter该怎么写了?可以参考下面的代码: <intent-filter><action androi…

eNSP-抓包实验

拓扑结构图&#xff1a; 实验需求&#xff1a; 1. 按照图中的设备名称&#xff0c;配置各设备名称 2. 按照图中的IP地址规划&#xff0c;配置IP地址 3. 使用Wireshark工具进行抓ping包&#xff0c;并分析报文 4. 理解TCP三次握手的建立机制 实验步骤&#xff1a; 1、配置P…