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

Linux网络编程核心:Socket、字节序与TCP/UDP实战解析

1. 从零开始理解 Linux 网络编程&#xff1a;Socket、字节序与地址转换如果你刚开始接触 Linux 下的网络编程&#xff0c;看到一堆socket、bind、connect、htonl之类的函数&#xff0c;还有sockaddr_in这种结构体&#xff0c;可能会觉得头大。别担心&#xff0c;这种感觉我十几…...

嵌入式Linux UVC驱动开发:DWC2控制器与处理单元数据流详解

1. 项目概述&#xff1a;从DWC2控制器到UVC处理单元在嵌入式Linux系统里搞USB摄像头驱动开发&#xff0c;尤其是用DWC2这种集成在SoC里的USB控制器&#xff0c;UVC&#xff08;USB Video Class&#xff09;驱动的“处理单元”绝对是个绕不开的核心。很多朋友在移植或调试摄像头…...

诚邀您参加 2026 Google Cloud Startup Day

以下文章来源于谷歌云服务&#xff0c;作者 Google Cloud...

三年级下册语文第三单元作文:我做了一个小实验300字

三年级下册语文《我做了一个小实验》作文&#xff0c;重点要写清楚&#xff1a;做了什么实验实验前准备了什么实验过程看到了什么变化明白了什么道理我用夸克网盘分享了「三年级下册语文作文」&#xff0c;1-8单元。链接&#xff1a;https://pan.quark.cn/s/a80b7ca7f993这类作…...

GD32/STM32串口高效收数秘籍:巧用IDLE中断判断一帧数据收完

GD32/STM32串口高效收数实战&#xff1a;IDLE中断DMA的黄金组合 在嵌入式开发中&#xff0c;串口通信就像设备间的"普通话"&#xff0c;但如何高效接收不定长数据帧却让不少工程师头疼。想象一下无人机飞控与地面站的通信场景&#xff1a;数据包可能短至几个字节的指…...

从 0 到 1:用魔珐星云打造真实可用的智能健身私教【技术原理文章】

> 我在学习具身智能的实战文章&#xff0c;本文为技术文章&#xff0c;非广告一、健身交互痛点&#xff1a;传统数字人 / 健身工具缺失沉浸式陪伴式互动日常健身长期存在行业共性痛点&#xff1a;不管是纯视频课程&#xff0c;还是传统云端实时交互数字人&#xff0c;都难以…...

community:CANN开源社区治理指南

前言 想象一下&#xff0c;你开发了一个很棒的算子&#xff0c;想贡献给CANN社区&#xff0c;但不知道从哪入手——怎么提Issue&#xff1f;怎么提PR&#xff1f;代码规范是什么&#xff1f;会不会被拒绝&#xff1f; 我刚接触CANN开源社区那会&#xff0c;就是这样的——写了个…...

CANN ONNX 模型生态兼容实战:从模型导入、算子映射到常见报错排查的全流程指南

一、ONNX 与 CANN 的关系 1.1 模型流转路径 PyTorch/TensorFlow↓ (export)ONNX 模型↓ (ATC 转换)CANN .om 模型↓ (ACL 推理)昇腾 NPU 执行ONNX 是中间格式&#xff0c;ATC 是桥梁1.2 为什么需要了解兼容性 常见痛点:1. PyTorch 新算子 ONNX 不支持2. ONNX 支持但 ATC 不支…...

C#从零开始学习笔记---第九天

又是新的一天&#xff0c;欢迎大家继续查看我的学习笔记&#xff0c;这两天确实状态一般&#xff0c;今天内容我们也不记录太多&#xff0c;主要分为两大块&#xff0c;第一块是对之前提到过的数组进行一个复习&#xff0c;第二块就是在记录一下集合和哈希表的一些内容。话不多…...

Blender 3MF插件:实现CAD到3D打印的无缝转换完整指南

Blender 3MF插件&#xff1a;实现CAD到3D打印的无缝转换完整指南 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 在3D打印和数字制造领域&#xff0c;3D Manufacturing F…...