当前位置: 首页 > news >正文

el-upload上传图片到七牛云或阿里云

(1)绑定上传地址,上传数据对象

<el-upload class="upload-demo" :action="uploadUrl" :data="uploadData":on-success="handleSuccess" :file-list="[]" :show-file-list="false" :limit="1">
</el-upload>

(2)定义数据

// 商户的driver
driver: null,
// 图片上传的路径
uploadUrl: '',
// 上传图片的携带的信息
uploadData: {},
// 图片的链接头部分
cdn: ""

(3)定义方法

        图片的路径就是图片头加上返回的key

/*** 获取获取商户的driver*/
async getDriver() {let res = await customerService.getDriver();if (res.code == 200) {this.driver = res.data.cdn_driver;this.cdn = res.data.cdn;this.driver ? this.getUploadToken() : "";}
},
/*** 上传图片获取token*/
async getUploadToken() {let params = {driver: this.driver};let res = await customerService.getUploadToken(params);if (res.code == 200) {switch (this.driver) {case 'oss':this.uploadData = {OSSAccessKeyId: res.data.accessid,policy: res.data.policy,success_action_status: '200',callback: res.data.callback,signature: res.data.signature,dir: res.data.dir};this.uploadUrl = res.data.host;break;case 'qiniu':this.uploadData = {dir: '',token: res.data.token};this.uploadUrl = "https://up.qiniup.com";}}
},
/*** 上传图片成功*/
handleSuccess(res, file, fileList) {// 图片的路径就是图片头加上返回的keylet imgUrl = `${this.cdn}${res.key}`;
}

相关文章:

el-upload上传图片到七牛云或阿里云

&#xff08;1&#xff09;绑定上传地址&#xff0c;上传数据对象 <el-upload class"upload-demo" :action"uploadUrl" :data"uploadData":on-success"handleSuccess" :file-list"[]" :show-file-list"false"…...

Web jQuery—选择器、样式和效果

jQuery 选择器、样式和效果 代码下载 jQuery 介绍 JavaScript库&#xff1a;即 library&#xff0c;是一个封装好的特定的集合&#xff08;方法和函数&#xff09;。从封装一大堆函数的角度理解库&#xff0c;就是在这个库中&#xff0c;封装了很多预先定义好的函数在里面&a…...

Java和Kotlin的Field在继承中的不同表现

Kotlin是一个宣称与Java兼容性较好的语言&#xff0c;但在接触后发现一些技术还是有“概念上”的冲突&#xff0c;本文就记录下两者对象的Field&#xff08;中文的说法有字段、域、属性、成员变量&#xff0c;下文若出现这些表达&#xff0c;指的都是这个东西&#xff09;在继承…...

MySQL 子查询

文章目录 1.简介2.优势3.分类3.1 标量子查询3.2 行子查询3.3 列子查询IN 操作符ALL 操作符ANY/SOME 操作符 3.4 表子查询 4.关联子查询5.EXISTS 和 NOT EXISTS6.横向派生表7.附录参考文献 1.简介 子查询是另一个语句中的 SELECT 语句。 子查询也称为内查询&#xff08;Inner …...

Ubuntu离线或在线安装CMake

首先下载适用于Ubuntu的CMake安装包&#xff0c;可以去官网下载&#xff0c;也可以通过下面的命令下载&#xff08;需要联网&#xff09;&#xff1a; wget https://cmake.org/files/v3.22/cmake-3.22.1.tar.gz将下载的安装包进行解压&#xff1a; tar -xvzf cmake-3.22.1.ta…...

后端面试话术集锦第 十七 篇:MySQL面试话术

这是后端面试集锦第十七篇博文——MySQL面试话术❗❗❗ 1. 解释一下单列索引和联合索引 单列索引是指在表的某一列上创建索引。 联合索引是在多个列上联合创建索引。 单列索引可以出现在where条件的任何位置,而联合索引需要按照一定的顺序来写。在多条件查询的时候,联合索引…...

< 文件资源管理器 > 和 < 此电脑 > 有什么区别?

“文件资源管理器”和 “此电脑” 的区别 1. 文件和文件夹管理&#xff1a;2. 访问存储设备&#xff1a;3. 搜索功能&#xff1a;4. 视图和排序选项&#xff1a;5. 快速访问&#xff1a; 主要的区别1. 界面和用途&#xff1a;2. 显示内容&#xff1a;3. 导航&#xff1a; 在Win…...

线上问诊:可视化展示

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 线上问诊&#xff1a;数仓开发(三) 线上问诊&#xff1a;可视化展示 文章目录 系列文章目录前言一、全流程调度1.生产新…...

如何选择合适的HTTP代理服务器

HTTP代理服务器是一种常见的网络代理方式&#xff0c;它可以帮助用户隐藏自己的IP地址&#xff0c;保护个人隐私和安全。然而&#xff0c;选择合适的HTTP代理服务器并不容易&#xff0c;需要考虑多个因素。本文将介绍如何选择合适的HTTP代理服务器。 了解代理服务器的类型 HTT…...

Car Window Control Reset

大众汽车窗口自动升降失效&#xff0c;重置&#xff1a; 扣住5秒&#xff0c;重启汽车&#xff0c;试一下车钥匙&#xff0c;和再重试这个按钮&#xff0c;扣一下试一试...

序列号序列号

主板序列号 string str;str bios.GetSystemSerialNumber(); //wentai//str1 bios.GetSystemECSerialNumber();//CLogHelp::ITCLog(str1);LocalSN str.c_str();str bios.GetSystemVersion();LocalMode str.c_str();string str1;str1 bios.GetSystemSerialNumber();CLogHe…...

SSM(Spring-Mybatis-SpringMVC)

文章目录 1. 介绍1.1 概念介绍 2 SSM整合框架3. SSM功能模块开发4 测试4.1 业务层接口测试4.2 表现层接口测试 5.优化 -表现层数据封装6.异常处理 1. 介绍 1.1 概念介绍 SSM项目是指基于SpringSpringMVCMyBatis框架搭建的Java Web项目。 Spring是负责管理和组织项目的IOC容器和…...

MySQL——数据的删除以及MySQL中的约束

删除数据 删除表中的一行数据&#xff0c;也必须加上 WHERE条件&#xff0c;否则整列的数据都会被删除。删除语句&#xff1a; delete from 表名 where 条件; 他会将所有的符合条件的数据删除&#xff0c;如果不写条件&#xff0c;则表中的数据全部删除&#xff1a; 如果不添…...

静态路由 网络实验

静态路由 网络实验 拓扑图初步配置R1 ip 配置R2 ip 配置R3 ip 配置查看当前的路由表信息查看路由表信息配置静态路由测试 拓扑图 需求&#xff1a;实现 ip 192.168.1.1 到 192.168.2.1 的通信。 初步配置 R1 ip 配置 system-view sysname R1 undo info-center enable # 忽略…...

数据结构-01 数据结构基本概念,算法时间复杂度,空间复杂度

0 数据结构概述 四门课的关系 1 绪论 数据对象、数据元素、数据项关系 1.1 数据结构的基本概念 1.2 算法和算法评价 小练习 空间复杂度中的递归调用 n只是传入 n也是数组&#xff0c;计算存储数组flag的空间大小...

【Redis】Bitmap 使用及应用场景

前言&#xff1a;bitmap 占用空间小&#xff0c;查询效率高&#xff0c;在一些场景中使用 bitmap 是一个很好的选择。 一、bitmap 相关命令 SETBIT - 设置指定位置的比特值&#xff0c;可以设为 1 或 0 例如 SETBIT key 10 1&#xff0c;将在 key 对应的 bitmap 中第10位设置为…...

C#,数值计算——用于积分函数与方法的Stiel类的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class Stiel { public class pp : UniVarRealValueFun, RealValueFun { public Stiel st { get; set; } null; public pp() { } public doubl…...

报错:为什么数组明明有内容但打印的length是0

文章目录 一、问题二、分析三、解决1.将异步改为同步2.设置延迟 一、问题 在日常开发中&#xff0c;for 循环遍历调用接口&#xff0c;并将接口返回的值进行拼接&#xff0c;即push到一个新的数组中&#xff0c;但是在for循环内部是可以拿到这个新的数组&#xff0c;而for循环…...

go gin gorm连接postgres postgis输出geojson

go gin gorm连接postgres postgis输出geojson 1. 技术环境 go-gin-gorm postgres-postgis go vscode环境安装-智能提示配置 2. 简单实现代码 思路就是&#xff1a;采用原生sql实现查询、更新等&#xff0c;采用gorm的raw来执行sql语句 package mainimport ("fmt"&q…...

4. Java 的线程安全机制之`volatile`

前言&#xff1a;在多线程编程过程中&#xff0c;线程安全是一个非常重要的概念&#xff0c;它有助于保证多线程程序的正确性和健壮性。其中&#xff0c;volatile是实现线程安全的一种方式&#xff0c;保证内存的立马可见&#xff0c;下面将会详细介绍。 文章目录 是什么为什么…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...