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

news2024/12/24 2:29:41

一.前端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);
  });
}

 

二.后端

后续需要的第三方包


    "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.png
        Body: img.buffer, // 上传文件的内容,可以为 FileStream、字符串、Buffer, 我们这里接收二进制Buffer
        onProgress: 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.coloradmin.cn/o/974468.html

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

相关文章

⽹络与HTTP 笔试题精讲1

OSI七层与TCP/IP 这个就是OSI参考模型,⽽实际我们现在的互联⽹世界是就是这个理论模型的落地叫做TCP/IP协议 TCP的三次握⼿与四次挥⼿ 客户端想要发送数据给服务端,在发送实际的数据之前,需要先在两端之间建⽴连接,数据发完以后也需要将该连接关闭。建⽴连接的过程就是我们…

Visual Studio 新建类从默认internal改为public

前言 之前一直用的Resharp辅助编写C#代码&#xff0c;Resharp用起来的确方便不少&#xff0c;但是太消耗开发机内存了。重装电脑后&#xff0c;还是决定使用Visual Studio内置的功能。 默认情况下&#xff0c;Visual Studio 中生成一个类或接口是internal类型的&#xff0c;而…

让你忘了自己还戴着耳机,南卡OE Pro 00压开放式耳机

开放式耳机的好处很多&#xff0c;不入耳不会产生异物感&#xff0c;在户外运动可以时刻保持与外界连接更安全&#xff0c;也不会因为耳塞的卫生问题造成耳道感染&#xff0c;因此对于需要长时间佩戴耳机的户外运动&#xff0c;尤其对于一些患有耳道疾病的用户&#xff0c;需要…

LM-Infinite: 一种简单有效的大模型即时长度泛化,解决更长文本推理问题

深度学习自然语言处理 原创作者&#xff1a;qazw 论文&#xff1a;LM-Infinite: Simple On-the-Fly Length Generalization for Large Language Models地址&#xff1a;https://arxiv.org/abs/2308.16137 进NLP群—>加入NLP交流群 摘要 近年来&#xff0c;LLM在各个领域的性…

问道管理:A股休息时间表?

在股票买卖中&#xff0c;歇息时刻能够给股民们喘息的时机&#xff0c;也是一种标准和保证买卖的方法。那么&#xff0c;A股的歇息时刻是什么时分&#xff1f;为什么要有这样的歇息时刻&#xff1f;歇息时刻对股民和商场又有哪些影响呢&#xff1f;本文将从多个角度剖析A股的歇…

Day 41 动态规划part03 : 343. 整数拆分 96.不同的二叉搜索树

96. 不同的二叉搜索树 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5示例 2&#xff1a; 输入&#xff1a;n 1…

【耗时50天报告】南卡/韶音/cleer等开放式耳机最详测评,2023开放式耳机机皇花落谁家

随着移动互联网的发展,蓝牙耳机已成为大众生活中不可或缺的移动设备。在蓝牙耳机这一种类中,开放式蓝牙耳机以其超强的舒适、安全、便携等优势而备受关注。相比传统蓝牙耳机,开放式耳机只需一个小巧的主体直接挂在耳朵上,不会给耳部带来任何压迫感,具有出色的通风性和舒适性&am…

【AIGC专题】Stable Diffusion 从入门到企业级实战0402

一、概述 本章是《Stable Diffusion 从入门到企业级实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》第02节&#xff0c; 利用Stable Diffusion ControlNet Openpose模型精准控制图像生成。本部分内容&#xff0c;位于整个Stable Diffusion生…

文件系统与inode编号

文件描述符fd 0&1&2 Linux 进程默认情况会有3个缺省打开的文件描述符&#xff0c;分别是标准输入0&#xff0c; 标准输出1&#xff0c; 标准错误2. 0,1,2对应的物理设备一般是&#xff1a;键盘&#xff0c;显示器&#xff0c;显示器 所以输入输出还可以采用如下方式 …

晶圆键合对准机的原理与应用

一、晶圆键合设备的工作原理 1、 第一个晶圆面朝下置于晶圆对准设备卡盘并传送到对准机内&#xff1b; 2、对准机内&#xff0c;晶圆在Z轴方向上移动直到被顶部的传输夹具真空吸附固定&#xff1b; 3、被传输夹具固定的第一个晶圆将成为后续对准工艺的基准&#xff0c;确定所…

SAP 获取本机信息(IP及电脑名称)<转载>

原文链接&#xff1a;https://blog.csdn.net/JYH1999/article/details/126489974 导语&#xff1a;最近在做日志的东西&#xff0c;需要记录用户的IP&#xff0c;以及电脑名称&#xff0c;找了一下&#xff0c;SAP有两个类可以实现。 一、效果展示 二、代码 *&----------…

一文学会K8s集群搭建

环境准备 节点数量&#xff1a;2台虚拟机 centos7硬件配置&#xff1a;master节点内存至少3G&#xff08;2G后面在master节点初始化集群时会报错&#xff0c;内存不够&#xff09;&#xff0c;node节点可以2G&#xff0c;CPU至少2个&#xff0c;硬盘至少30G网络要求&#xff1…

双向圆周阵列及阵列间距调整

SOLIDWORKS提供的阵列功能是非常实用的快速建模功能&#xff0c;可以帮助我们快速的形成重复特征。在以往的版本中&#xff0c;无论是线性阵列还是其他阵列都提供了可以双向进行的阵列选项。也就是可以帮助我们保证两个方向的阵列属性。 今天我们要讲的是在圆周阵列中增加双向的…

【EPLAN】统一修改项目中字体大小

需求&#xff1a;当A3图框时&#xff0c;“设备标识符”等字体太小&#xff0c;影响查看图纸。需要统一调大。 通过“层管理”改变字体大小。 “项目数据”->“层管理” 找到需要改变字体的大小如“设备标识符”&#xff1a; Over。 效果&#xff08;2.5mm 调整到了 3.5mm&a…

我国元宇宙专利申请位列全球靠前,UTONMOS元宇宙游戏体验再升级

中青网报道 近日&#xff0c;2023年服贸会数字贸易发展趋势和前沿高峰论坛举办并发布了《中国元宇宙产业发展趋势洞察》报告。报告指出我国元宇宙相关专利申请量位列全球第二。 元宇宙是虚拟世界和现实世界融合的载体&#xff0c;正成为驱动数字经济发展和助力数字中国建设的重…

【python基础知识】0.print()函数

文章目录 前言print()函数无引号单引号的用法双引号的用法三引号的用法转义字符 变量和赋值变量的命名规范 下关预告 前言 Python就是一个能够帮你实现需求的工具&#xff0c;它更像是一把万能钥匙&#xff0c;决定用它来打开哪一扇门的&#xff0c;是你自己。 『千里之行&am…

2.1 PE结构:文件映射进内存

PE结构是Windows系统下最常用的可执行文件格式&#xff0c;理解PE文件格式不仅可以理解操作系统的加载流程&#xff0c;还可以更好的理解操作系统对进程和内存相关的管理知识&#xff0c;在任何一款操作系统中&#xff0c;可执行程序在被装入内存之前都是以文件的形式存放在磁盘…

阿里云2核4G服务器5M带宽五年租用价格表

阿里云2核4G服务器5M带宽可以选择轻量应用服务器或云服务器ECS&#xff0c;轻量2核4G4M带宽服务器297元一年&#xff0c;2核4G云服务器ECS可以选择计算型c7、c6或通用算力型u1实例等&#xff0c;买5年可以享受3折优惠&#xff0c;阿腾云分享阿里云服务器2核4G5M带宽五年费用表&…

Java“牵手”阿里巴巴店铺所有商品API接口数据,通过店铺ID获取整店商品详情数据,阿里巴巴店铺所有商品API申请指南

阿里巴巴平台店铺所有商品数据接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取阿里巴巴整店的商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片、价格信息等详细信息 。 获取店铺所有商品接口API是一种用于获取电商平台…

了解被测系统(一)技术架构

目录 web应用组成 项目实例 系统架构图 整体架构图 web应用组成 从开发者的角度来看&#xff0c;web 应用主要由三部分组成: 用户界面&#xff0c;业务逻辑&#xff0c;数据。 1.用户界面(视图层) 用于将数据展示给用户的地方&#xff0c;采用 HTML&#xff0c;CSS&…