用户头像上传

将用户上传的头像存储在腾讯云存储桶里

注册腾讯云

https://cloud.tencent.com/login

创建存储桶

配置跨域

来源 * (任何都可以访问)

put get post 请求都可以

点击概览,查看存储桶基本信息

记录保存存储桶名称和地域

找到api密钥管理,新建密钥

https://console.cloud.tencent.com/cam/capi

记录

SecretId

SecretKey

1

安装腾讯云js-sdk

 npm i cos-js-sdk-v5 

使用el-upload自定义上传

<el-uploadclass="avatar-uploader"action="":show-file-list="false":before-upload="beforeAvatarUpload":http-request="uploadImage"><img v-if="value" :src="value" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload>

相关属性查阅elementui文档

value为父组件v-model绑定在子组件上,通过props传过来的值

https://element.eleme.cn/#/zh-CN/component/upload

import COS from 'cos-js-sdk-v5'
export default {props: {value: {type: String,default: ''}},data() {return {imageUrl: ''}},methods: {beforeAvatarUpload(file) {const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG JPEG PNG BMP 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')}return isJPG && isLt2M},uploadImage(params) {const cos = new COS({SecretId: '',SecretKey: ''})cos.putObject({Bucket: '', // 存储桶名称Region: '', // 地域名称Key: params.file.name, // 文件名称StorageClass: 'STANDARD', // 固定值Body: params.file // 文件对象}, (err, data) => {if (data.statusCode === 200 && data.Location) {// 拿到了腾讯云返回的地址// 通过input自定义事件将地址传出去this.$emit('input', 'http://' + data.Location) // 将地址返回了} else {this.$message.error(err.Message) // 上传失败提示消息}}) // 完成cos对象的初始化}}
}

填上储存桶的名称和地域

以及SecretId: '',
        SecretKey: ''

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

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

相关文章

配置git环境

目录 一、安装[Git Bash](https://gitforwindows.org/)二、进入家目录生成秘钥&#xff1a;执行命令ssh-keygen三、在[Ac Git](https://git.acwing.com/)上注册账号四、将id_rsa.pub的内容复制到Ac Git上Reference 一、安装Git Bash 二、进入家目录生成秘钥&#xff1a;执行命…

Mongodb 控制查询返回字段

使用关系型数据库时&#xff0c;用户在select命令后添加字段名称控制返回字段。mongodb中也支持对查询返回字段的控制。默认返回文档的所有字段。为了限制返回数据量&#xff0c;提高网络传输速率。用户可以通过投射&#xff08;projection&#xff09;来指定返回字段或在返回结…

Git学习笔记(第7章):IDEA实现Git操作(VSCode)

目录 7.1 配置忽略文件 7.2 初始化本地库 7.3 添加暂存区、提交本地库 7.4 修改文件 补充&#xff1a;工具栏简介 7.1 配置忽略文件 问题引入 在版本控制系统中&#xff0c;有些文件或目录是不需要纳入版本管理的&#xff0c;比如编译产生的临时文件、日志文件、缓存文件等…

项目篇:基于UDP通信模型的网络聊天室

思维导图 基于UDP通信模型的网络聊天室 消息分类及数据包结构 服务器端 #include <head.h> #define SER_PORT 8888 #define SER_IP "192.168.232.133" typedef struct mb {struct sockaddr_in cin;char name[20];struct mb *next; }*member; //群发消息 int …

计算机网络复试

第1章 概述 时延&#xff1a;发送(传输)时延传播时延 链路中每多一个路由器&#xff0c;就增加一个分组的发送时延 第2章 物理层 2.4 编码与调制->编码(基带调制)->曼彻斯特编码 ->带通调制->混合调制->正交振幅调制QAM 信道极限容量 奈氏准则 无噪声最大速…

【window】Windows11:该文件没有与之关联的应用来执行该操作

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能 之前win10升级win11后&#xff0c;受不了桌面软件图标的的小箭头&#xff0c;所以弄掉了&#xff0c;但是随之而来产…

Linux修改文件名常见的三种方式

在Linux系统中&#xff0c;有多种方式可以修改文件名。以下是其中的三种常见方式&#xff1a; 1. List item 使用mv命令&#xff1a; mv oldfilename newfilename例如&#xff0c;要将文件"oldfile.txt"重命名为"newfile.txt"&#xff0c;可以使用以下命…

9个好习惯教会你设计商业模式的电商干货,真心分享丨运营逻辑

9个好习惯教会你设计商业模式的电商干货&#xff0c;真心分享丨运营逻辑 文丨微三云营销总监胡佳东&#xff0c;点击上方“关注”&#xff0c;为你分享市场商业模式电商干货。 - 最近&#xff0c;有很多新认识的朋友&#xff0c;都在询问我最近市场上&#xff0c;有什么好的…

定类变量的频率分析(SPSS

目录 1.导入数据&#xff1a;2.频率分析&#xff1a;3.结果分析4.表格导出为excel小结&#xff1a; 1.导入数据&#xff1a; 直接把表格拖入spss 然后点确定 下面会有变量视图&#xff0c;查看各个指标的类型和属性&#xff1a; 2.频率分析&#xff1a; 点击频率分析 选择…

json-server的基础使用

本篇文章与另一篇文章有关系axios的基本使用&#xff0c;大家可以看看这篇文章 json-server 是什么? 用来快速搭建模拟的 REST API 的工具包 可以30秒内快速为我们搭建一个假的基于 REST API的服务 我们要如何使用呢&#xff1f; 1.先安装 //全局安装 npm i -g json-server …

伪原创文章生成器软件免费使用的方法

写文章不仅消耗时间&#xff0c;而且还容易出现写不出内容的问题&#xff0c;随着技术的发展&#xff0c;越来越多的人开始不再亲历亲为的去写文章了&#xff0c;而是用起了伪原创文章生成器软件&#xff0c;对于还不了解自动生成文章软件的人&#xff0c;可不要小瞧这个它了&a…

JOSEF约瑟 零序电流继电器 JL-8D/2X122A4(S) 0-30AAC 220VDC

系列型号 JL-8D/3X1定时限电流继电器&#xff1b;JL-8D/3X111A2定时限电流继电器&#xff1b; JL-8D/3X121A2定时限电流继电器&#xff1b;JL-8D/3X211A2定时限电流继电器&#xff1b; JL-8D/3X221A2定时限电流继电器&#xff1b;JL-8D/3X2定时限电流继电器&#xff1b; JL-8D/…

[小程序]Http网络请求

一、数据请求限制 出于安全性(bushi)考虑&#xff0c;小程序请求的数据接口必须具备以下两个条件&#xff1a; ①只能请求Https类型 ②必须将接口域名添加到信任列表中 1.配置request合法域名 配置步骤如下&#xff1a;小程序管理后台->开发->开发设置->服务器域名-&g…

golang any 之中的类型及 interface 接口

在 golang 之中 any 类型&#xff0c;从字面意思上看是任意类型&#xff0c;这很类似我们在 C#、C 之中的任意指针类型 void*&#xff08;原生&#xff09;&#xff0c;C# 之中诡异的 object。 any 是一个接口类型&#xff0c;其语法声明为&#xff1a; // any is an alias fo…

JavaScript 基础语法

文章目录 逻辑控制语句直接从页面输出数据类型相加循环语句测试语法 逻辑控制语句 function print(){//注意常量尽量全部使用大写const SEASON 3 if(SEASON>1&&SEASON<3){console.log(春天来了)}else if(SEASON>4&&SEASON<6){console.log(夏天来…

幻兽帕鲁专用服务器

随着幻兽帕鲁这款游戏的热度持续升温&#xff0c;我们遍寻全网&#xff0c;带给各位玩家一个全新的、高品质的游戏体验——莱卡云服务器。有幻兽帕鲁的热衷者们无需再为了服务器的选取困扰&#xff0c;因为我们可以肯定地说&#xff1a;选择莱卡云&#xff0c;你不会失望。 首先…

【leetcode100-044到050】【二叉树】七题合集

昨天光写题忘写文章了&#xff0c;合并到今天一起写了///一共七个题/// 【二叉搜索树中第k小元素】 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 思路&#xf…

java SSM政府采购管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM政府采购管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

飞书+ChatGPT+cpolar搭建企业智能AI助手并实现无公网ip远程访问

文章目录 推荐 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂…

C语言第五弹---分支语句(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 分支语句 1、if语句1.1、if1.2、 else1.3、 分支中包含多条语句1.4、嵌套if1.5、 悬空else问题 2、关系操作符3、 条件操作符总结 C语言是结构化的程序设计语言&…