基于element-plus +腾讯云COS实现图片上传

① 首先基于element-plus里面的:http-request="upload"自定义封装事件写一个点击事件之后基于腾讯云的

  1. 登录 对象存储控制台 ,创建存储桶。获取存储桶名称和 地域名称
  2. 登录 访问管理控制台 ,获取您的项目 SecretId 和 SecretKey。
  3. 在项目中安装 SDK 【npm i cos-js-sdk-v5 --save】
  4. 使用 const COS = require(‘cos-js-sdk-v5’);// 或 import COS from ‘cos-js-sdk-v5’;进行引入
  5. 前端使用固定密钥计算签名,该格式适用于前端调试,若使用此格式,请避免泄露密钥

【这里还有一些推荐的方法具体见 https://cloud.tencent.com/document/product/436/11459 】

  1. 当我们获取SecretKey 和 SecretId之后在定义的upload上传方法中调用 cos.uploadFile实现图片上传

腾讯云的相关操作:【https://cloud.tencent.com/document/product/436/11459】

// 代码:
<template><div class="upload-box"><!-- 给action一个#号 就不会报错了 --><!-- file-list是上传的文件列表 可以绑定到上传组件上,让上传组件来显示 --><!-- upload组件显示的是file-list --><el-upload class="avatar-uploader" list-type="picture-card" :limit="1" action="#" :before-upload="beforeUpload":http-request="upload" :on-preview="preview" :file-list="state.fileList"style="width: 200px":on-change="changeFile":class="{ disabled: fileComputed }"><!-- 当fileComputed 的值为 true,则给元素添加名为 "disabled"CSS 类名;如果 fileComputed的值为 false,则移除该 CSS 类名。 --></el-upload><el-dialog v-model="state.showDialog" title="图片预览"><img :src="state.imgUrl" alt="" style="width: 100%" /></el-dialog></div>
</template><script setup>
import { reactive, computed } from "vue"
import COS from "cos-js-sdk-v5" // 引入腾讯云cos包
import { ElMessage } from "element-plus"
// 实例化COS对象
const cos = new COS({// 拷贝自己的秘钥和key 只有用自己的key和自己的秘钥才能上传到自己的存储桶里面SecretId: "自己的身份识别ID", // 身份识别 IDSecretKey: "自己的身份秘钥", // 身份密钥
})const state = reactive({fileList: [],showDialog: false,imgUrl: "",currentFileUid: null, // 记录当前正在上传的uid
})
const fileComputed = computed(() => {return state.fileList.length === 1
})//   点击预览事件
const preview = (file) => {console.log(file.url)state.imgUrl = file.urlstate.showDialog = true
}const beforeUpload = (file) => {const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"]if (!types.some((item) => item === file.type)) {//   如果不存在ElMessage.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!")return false // 上传终止}// 检查文件大小  5M 1M = 1024KB 1KB = 1024Bconst maxSize = 10 * 1024 * 1024if (file.size > maxSize) {//   超过了限制的文件大小ElMessage.error("上传的图片大小不能大于5M")return false}//   已经确定当前上传的就是当前的这个file了state.currentFileUid = file.uidreturn true // 最后一定要return  true
}
// changeFile 函数的主要作用是在文件列表发生变化时,根据最新的文件列表更新 state.fileList,保持数据的同步和一致性。
// 这样可以确保组件在文件变化时能够及时更新展示的内容。如果有任何疑问或需要进一步解释,请随时告诉我!
// 不能用push 这个钩子会执行多次
const changeFile = (file, fileList) => {// file是当前的文件 fileList是当前的最新数组 state.fileList// 如果当前fileList中没有该文件的话 就往里进行追加state.fileList = fileList.map((item) => item)
}
// 进行上传操作
const upload = (params) => {if (params.file) {// 执行上传操作// 这里相当于传入了两个参数 第一个参数包含了上传所需要的参数,第二个参数是一个回调函数用于处理上传操作的结果// 包括错误信息和上传成功后的返回数据cos.putObject({Bucket: "存储桶名称", // 存储桶    【自己创建的桶的名称】Region: "ap-nanjing", // 地域 【自己创建的时候选择的地域】Key: params.file.name, // 文件名Body: params.file, // 要上传的文件对象StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可},(err, data) => {if (!err && data.statusCode === 200) {// 上传成功跟新状态中的文件列表state.fileList = state.fileList.map((item) => {// 去找谁的uid等于刚刚记录下来的idif (item.uid === state.currentFileUid) {// 将成功的地址赋值给原来的url属性return { url: "http://" + data.Location, upload: true }}return item})}})}
}
</script><style>
.upload-box {display: block;width: 200px;margin: 0 auto;
}.disabled .el-upload--picture-card {display: none;
}
</style>
参考:https://cloud.tencent.com/document/product/436/64960#.E9.AB.98.E7.BA.A7.E4.B8.8A.E4.BC.A0
  https://juejin.cn/post/7093678563747954696

注意: 我们在使用cos进行上传的时候需要创建桶,获取秘钥等操作
创建存储桶 【https://cloud.tencent.com/document/product/436/13309 创建存储桶的具体操作】文档中心-左侧创建存储桶
获取秘钥的具体操作 【https://cloud.tencent.com/document/product/598/40488】
–>

补充:

在代码中,如果直接使用 push 方法将文件对象添加到 state.fileList 中,这会导致数组的长度发生变化,
从而触发 Vue 的响应式机制。当触发响应式更新时,changeFile 方法会再次被调用,进而导致多次执行。

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

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

相关文章

音频读取之wave和liborsa

wave 常见的语音信号处理python库有librosa, scipy, soundfile等等。wave库是python的标准库&#xff0c;对于python来说相对底层&#xff0c;wave不支持压缩/解压&#xff0c;但支持单声道/立体声语音的读取。 读取音频 import wave #导入库file_path D:/ba.wav #文件路径…

Vue2 + node.js项目

1、Vue2 vue2主要功能包括登入、退出、用户权限、表格的增删改查、文件下载。 Vue2项目地址https://gitee.com/www6/finance1.git 2、node.js编写后端接口 2.1、项目初始化 后端地址https://gitee.com/www6/finance-backend.git 创建项目 npm install -g koa-generator …

有趣的前端知识(三)

推荐阅读 有趣的前端知识&#xff08;一&#xff09; 有趣的前端知识&#xff08;二&#xff09; 文章目录 推荐阅读JS内置对象JS外部对象BOM模型history对象screen对象navigator对象 DOM&#xff08;文档对象模型&#xff09;DOM的方法&#xff08;对于节点的操作&#xff09…

【打工日常】docker部署快速开发海报工具

一、fastposter海报生成器介绍 fastposter 是一款海报生成器&#xff0c;它能够让您快速、轻松地创建各种类型的海报。 只需上传一张背景图&#xff0c;然后在需要的位置添加文字、图片、二维 、头像等组件。点击生成代码按钮&#xff0c;直接获取各种语言 SDK 的调用代码&…

智能物流新纪元:分布式I/O模块重塑仓储自动化

随着工业4.0概念的深入人心&#xff0c;物流行业正在经历前所未有的变革。在这个过程中&#xff0c;物流企业必须积极走向工业自动化、智能化&#xff0c;进而提高物流效率&#xff0c;降低物流成本&#xff0c;以便更好地满足客户和市场的需求。智能物流、仓库自动化已然是趋势…

Java实现PDF文字内容识别,结合OCR实现PDF图片实现

使用插件&#xff1a;UMI-OCR、PDFBOX 实现思路&#xff1a;通过PDFBOX识别PDF文字&#xff0c;如果是图片&#xff0c;则识别不出来&#xff0c;再调用OCR进行识别返回文字&#xff1b;OCR识别较慢&#xff0c;长图识别不出来&#xff0c;目前HTTP方式只支持图片格式&#xf…

【设计模式】二、UML 类图与面向对象设计原则 之 UML概述

二、UML 类图与面向对象设计原则 &#xff08;一&#xff09;UML 类图 UML 概述类与类的UML图示类之间的关系 &#xff08;二&#xff09;面向对象设计原则 单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09;开闭原则&#xff08;Open-Closed Princip…

雅特力车规级MCU-AT32A403A开发板评测 06 GC9A01 SPI-LCD 1.28圆形屏幕

雅特力车规级MCU-AT32A403A开发板评测 06 GC9A01 SPI-LCD 1.28圆形屏幕 硬件平台 AT32A403A Board开发板 1.28寸圆形彩色TFT显示屏高清IPS 模块240X240 SPI接口GC9A01 产品介绍 推荐一个屏幕资料参考网站 http://www.lcdwiki.com/1.28inch_IPS_Module 1.28寸圆形IPS彩屏&…

C语言——动态内存分配

前言&#xff1a;通过前面的学习&#xff0c;我们知道C语言中在内存中开辟空间的方法有&#xff1a;变量和数组。既然拥有了开辟空间的方法&#xff0c;我们为什么还要学习动态内存分配呢&#xff1f; int val 20; //在内存中开辟四个字节的空间 int arr[10] { 0 }; //在内…

golang 隐式接口实战以及与 Java 接口的区别

categories: [Golang] tags: Golang Java 写在前面 最近在看 go语言学习指南-惯例模式与编程实战, 看到接口那块有点困惑了, 因为之前一直是学 C的, 对于接口了解的不多, 通过 GPT 补补课. 首先介绍一下接口, 接口其实是针对一组方法(行为)的抽象, 与抽象类有所不同(虽然在 …

【金三银四】掌趣科技24.3.7 H项目 服务端开发笔试题

考试题型&#xff1a; 不定项选择题 10 道 &#xff0c; 填空题 10 道 &#xff0c; 问答题 2 道 &#xff0c; 编程题 4 道 目录 不定项选择题 10 道填空题 10 道问答题 2 道编程题 4 道 不定项选择题 10 道 在TCP协议中&#xff0c;发送方的窗口大小是由两个关键因素共同决定…

iOS runtime理解和应用场景

一、runtime的动态性 OC的运行时系统(Runtime System)提供了丰富的动态特性,包括类与对象的创建、消息发送与转发、方法的动态添加与替换、属性的动态合成等。通过使用运行时库提供的API,可以在运行时获取和操作类与对象的信息,实现各种动态性的功能。 我对 Runtime 的理…

鸿蒙 Harmony 初体验

前言 看现在网上传得沸沸扬扬的鸿蒙&#xff0c;打算弄个 hello world 玩一下, 不然就跟不上时代的发展了 环境安装 我的环境 Windows 11 家庭中文版HarmonyOS SDK (API 9)DevEco Studio (3.1.1 Release)Node.js (16.19.1) 开发IDE下载 官方下载链接 配置 nodejs 这里帮…

从零开始学习typescript系列2: typescript配置文件ts.config.js之详细解释

基本了解 tsconfig.json 是 ts 支持的配置文件 大体可以分为两个部分描述&#xff0c; 第一部分&#xff1a;编译规则配置(compilerOptions)&#xff0c;第二个部分&#xff1a;哪些文件进行编译(files,include,exclude) {"compilerOptions": {},"files&quo…

Opencascade基础教程(9):切换视图

1、切换视图 1、1 增加视图切换按钮&#xff0c;并添加消息响应函数。 void COCCDemoView::OnButtonFrontview() {//前视图m_View->SetProj(V3d_Yneg);m_View->FitAll(); }void COCCDemoView::OnButtonRearview() {//后视图m_View->SetProj(V3d_Ypos);m_View->Fit…

【华为Datacom数通认证】HCIA-HCIP-HCIE

华为认证课程概述 华为认证是华为技术有限公司(简称"华为")基于"平台生态"战略&#xff0c;围绕"云-管-端"协同的新ICT技术架构&#xff0c;打造的业界覆盖ICT领域最广的认证体系&#xff0c;包含"ICT技术架构认证"、"ICT开发者…

学习JAVA的二十二天(基础)

目录 网络编程 三要素&#xff1a; IP InetAddress类 端口号 协议 UDP协议 TCP协议 前言&#xff1a;学习JAVA的第二十一天&#xff08;基础&#xff09;-CSDN博客 网络编程 在网络通信协议下&#xff0c;不同计算机上运行的程序,进行的数据传输。 三要素&#xff1a;…

installation of package ‘RDocumentation’ had non-zero exit status

installation of package ‘RDocumentation’ had non-zero exit status Warning in install.packages :installation of package ‘httr’ had non-zero exit status Warning in install.packages :installation of package ‘openssl’ had non-zero exit status 由于项目需…

蓝桥杯(1):python排序

1 基础 1.1 输出 1.1.1 去掉输出的空格 print("Hello","World",123,sep"") print("hello",world,123,sep) print(hello,world,123) #输出结果 #HelloWorld123 #helloworld123 #hello world 123 1.1.2 以不同的方式结尾 print(&quo…

Ubuntu Flask 运行 gunicorn+Nginx 部署

linux Ubuntu 下运行python 程序出现killed 原因&#xff1a;CPU或内存限制&#xff1a;在华为云上&#xff0c;你可能有CPU或内存使用的限制。例如&#xff0c;如果你使用的是一个固定大小的实例&#xff0c;那么超过该实例的CPU或内存限制可能会导致进程被杀死。 参考&am…