当前位置: 首页 > 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;下面将会详细介绍。 文章目录 是什么为什么…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

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…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...