上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】

1、首先登录腾讯云官网控制台 进入对象存储页面

2、找到跨越访问CIRS设置 配置规则

 点击添加规则

 填写信息

 3、书写代码

这里用VUE3书写

第一种用按钮出发事件形式

<template><div><input type="file" @change="handleFileChange" /></div>
</template><script>
import COS from "cos-nodejs-sdk-v5"; // 导入cos-nodejs-sdk-v5包export default {methods: {handleFileChange(event) {const file = event.target.files[0];const cos = new COS({SecretId: "YOUR_SECRET_ID",SecretKey: "YOUR_SECRET_KEY",});// 替换成你的 Bucket 名称和 Regionconst bucket = "YOUR_BUCKET_NAME";const region = "YOUR_BUCKET_REGION";// 生成对象存储桶中的图片路径const key = `images/${file.name}`;// 将图片上传到腾讯云对象存储桶cos.putObject({Bucket: bucket,Region: region,Key: key,Body: file,},(err, data) => {if (err) {console.error("上传失败:", err);this.$message.error("上传失败")} else {console.log("上传成功:", data.Location);this.$message.success("上传成功")}});},},
};
</script>

4、测试

点击选择文件

选择图片 

等待结果

 

第二种用el-upload

<el-upload v-if="imageUrl===null"class=""list-type="picture-card"

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

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

相关文章

数值线性代数:奇异值分解SVD

本文记录计算矩阵奇异值分解SVD的原理与流程。 注1&#xff1a;限于研究水平&#xff0c;分析难免不当&#xff0c;欢迎批评指正。 零、预修 0.1 矩阵的奇异值 设列满秩矩阵&#xff0c;若的特征值为&#xff0c;则称为矩阵的奇异值。 0.2 SVD(分解)定理 设&#xff0c;则…

神经网络简单介绍

人工神经网络(artififial neural network) 简称神经网络&#xff0c;它是一种模仿生物神经网络结构和功能的非线性数学模型。 神经网络通过输入层接受原始特征信息&#xff0c;再通过隐藏层进行特征信息的加工和提取&#xff0c;最后通过输出层输出结果。 根据需要神经网络可以…

RTPSv2.2(中文版)

实时发布订阅协议 &#xff08;RTPS&#xff09; DDS互操作性 有线协议规范 V2.2 &#xff08;2014-09-01正式发布&#xff09; https://www.omg.org/spec/DDSI-RTPS/2.2/PDF 目 录 1 范围Scope 9 2 一致性Conformance 9 3 参考文献References 9 4 术语和定义Terms a…

centos(linux)手动配置ip地址

查看系统 查看ip 进入网卡配置的目录 [root178-119-30-16 ~]# cd /etc/sysconfig/network-scripts/ [root178-119-30-16 network-scripts]# ls ifcfg-ens192 ifdown ifdown-ippp ifdown-post ifdown-sit ifdown-tunnel ifup-bnep ifup-ipv6 ifup-plus…

【Mysql】万字长文带你快速掌握数据库基础概念及SQL基本操作

文章目录 前言一、数据库相关概念1. 什么是数据库2. 数据库的种类3. Mysql 简介4. SQL简介5. 数据库中常见的数据类型 二、SQL基础1. SQL通用语法2. SQL的主要分类3. DDL&#xff08;数据库&#xff0c;表&#xff0c;索引&#xff0c;视图&#xff09;4. DML&#xff08;数据的…

14:00面试,14:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,…

【每日一题】—— A - 1-2-4 Test (AtCoder Beginner Contest 270)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

HiveSQL SparkSQL中常用知识点记录

目录 0. 相关文章链接 1. hive中多表full join主键重复问题 2. Hive中选出最新一个分区中新增和变化的数据 3. Hive中使用sort_array函数解决collet_list列表排序混乱问题 4. SQL中对小数位数很多的数值转换成文本的时候不使用科学计数法 5. HiveSQL & SparkSQL中炸裂…

小程序动态隐藏分享按钮

// 禁用分享 wx.hideShareMenu({menus: [shareAppMessage, shareTimeline] })// 显示分享 wx.showShareMenu({withShareTicket: true,menus: [shareAppMessage, shareTimeline] })//私密消息 wx.updateShareMenu({isPrivateMessage: true, })

list与erase()

运行代码&#xff1a; //list与erase() #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend istr…

JMM是如何保证原子性呢?

3.3.1加锁 锁是一种通用技术&#xff0c;比如Java提供的Synchronized关键字就是锁的一种实现&#xff0c;Synchronized是排他锁/独占锁&#xff0c;就是有你没我的意思&#xff0c;只要其他线程到来访问&#xff0c;发现锁还未释放&#xff0c;就要在外面等待&#xff0c;因为S…

Redis—相关背景

Redis—相关背景 &#x1f50e;Redis—特性In-memory data structures—在内存中存储数据Programmability—可编程性Extensibility—可扩展性Persistence—持久化Clustering—集群High availability—高可用 &#x1f50e;Redis 为什么快&#x1f50e;Redis 的使用场景Real-tim…

【TiDB理论知识06】PD架构与作用

目录 一 PD的架构与功能 PD架构 PD作用 名词解释 路由功能 二 TSO的分配 概念 分配过程 性能问题 高可用问题 三 PD的调度原理 总流程 1 信息收集 2 生成调度 3 执行调度 四 Label的作用 Label的配置 给TiKV打标签 PD配置 一 PD的架构与功能 PD架构 PD集群…

学习Maven Web 应用

Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的项目&#xff0c;如何创建、构建、部署已经运行一个 web 应用。 创建 Web 应用 我们可以使用 maven-archetype-webapp 插件来创建一个简单的 Java web 应用。 打开命令控制台&#xff0c;…

数据库应用:Redis安装部署

目录 一、理论 1.缓存 2.关系型数据库与非关系型数据库 3.Redis 4.Redis安装部署 5.Redis命令工具 6.Redis数据库常用命令 7.Redis多数据库操作 二、实验 1.Redis安装部署 2.Redis命令工具 3.Redis数据库命令 4.Redis多数据库操作 三、问题 1.RESP连接CentOS 7 R…

【单片机】温控系统参数辨识及单片机PID控制

温控系统参数辨识及单片机PID控制 1. 温控系统组成2. matlab辨识系统参数2.1 采集阶跃响应信号导入matlab系统辨识模块 PID控制 1. 温控系统组成 半导体制冷片正向通电制冷&#xff0c;反向通电制热。系统采用半导体制冷片&#xff08;帕尔贴&#xff09;作为执行单元&#xf…

微信小程序 样式和全局配置

WXSS wxss 把屏幕分为750个物理像素&#xff0c;大屏大&#xff0c;小屏小&#xff0c;随着设备不一致自动适配 推荐使用iPhone6作为标准&#xff0c;1个rpx 0.5个px&#xff0c;把px乘以2就是rpx的参数 import 导入外部样式表 import /common/common.wxss 样式 权重一…

Vue2 第四节 计算属性,监视属性

1.计算属性 2.监视属性 3.计算属性与监视属性之间的关系 一.计算属性 定义&#xff1a;要用的属性不存在&#xff0c;要通过已有属性计算得来原理&#xff1a;底层借助了Object.defineproperty方法提供的getter和setterget函数什么时候会执行&#xff1a;初次读取的时候会执…

day47-SSM分页

SSM分页&#xff08;增删改查登录注册&#xff09; applicationContext.xml中加入mybatis-config.xml路径 mybatis-config.xml Mapper接口 Service接口及其实现类 Mapper.xml page.jsp personDetail.jsp addPerson.jsp updatePerson.jsp login.jsp regist…

搭建自己的Git服务器

环境 服务端&#xff1a;Ubuntu 22.04 客户端&#xff1a;Win11_x64 前提条件&#xff1a;需要确保在Windows机器上能够ping通Ubuntu服务器, 并且服务端与客户端均已安装了Git软件 服务端上的配置操作 以Ubuntu服务器作为Git服务端的运行环境&#xff0c;并方便后期免密推…