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}`;
}

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

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

相关文章

linux安装mysql无论如何修改权限和所属用户都出现Permission denied

前言 由于后期需要存储大量数据&#xff0c;因此需要将mysql的数据存储位置设置在大容量的硬盘 最早的时候尝试利用apt-get来安装mysql&#xff0c;按照教程设置新的存储为&#xff0c;包括创建新的data文件夹&#xff0c;和利用sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf和…

vmstat

vmstat VirtualMeomoryStatistics&#xff0c;虚拟内存统计&#xff0c;是Linux中监控内存的常用工具&#xff0c;可对操作系统的虚拟内存、进程、CPU等的整体情况进行监视。 [rootwenzi wenzi]# vmstat procs -----------memory---------- ---swap-- -----io---- -system--…

C#---第21: partial修饰类的特性及应用

0.知识背景 局部类型适用于以下情况&#xff1a; 类型特别大&#xff0c;不宜放在一个文件中实现。一个类型中的一部分代码为自动化工具生成的代码&#xff0c;不宜与我们自己编写的代码混合在一起。需要多人合作编写一个类 局部类型的限制: 局部类型只适用于类、接口、结构&am…

Python Qt学习(九)MainWindow

源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from reading ui file qt_mainwindow.ui # # Created by: PyQt5 UI code generator 5.15.9 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is # run again. Do n…

【UE 材质】常用向量运算节点——点积、叉积、归一化

目录 一、点积 二、叉积 三、归一化 一、点积 点积&#xff0c;也称为内积或数量积&#xff0c;是一种用于计算两个向量之间关系的操作。对于两个三维向量 A&#xff08;a1,a2,a3&#xff09;和 B(b1,b2,b3)&#xff0c;它们的点积可以用以下公式表示&#xff1a; ABa1​⋅…

大数据课程K13——Spark的距离度量相似度度量

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Spark的距离度量和相似度度量; ⚪ 掌握Spark的欧氏距离; ⚪ 掌握Spark的曼哈顿距离; ⚪ 掌握Spark的切比雪夫距离; ⚪ 掌握Spark的最小二乘法; 一、距离度量和相似度度量 1. …

MFC中获取任务栏大小

MFC怎么获得当前屏幕大小 你可以这样 HWND hwndGetDesktopWindow();RECT rect; GetClientRect(hwnd,&rect);//可以得到桌面大小 还有就是上面所说的 int nScreenWidth, nScreenHeight; nScreenWidth GetSystemMetrics(SM_CXSCREEN); nScreenHeight GetSystemMetrics(SM_…

【Grasshopper基础15】“右键菜单似乎不太对劲”

距离上一篇文章已经过去了挺久的&#xff0c;很长时间没有写GH基础部分的内容了&#xff0c;原因其一是本职工作太忙了&#xff0c;进度也有些落后&#xff0c;白天工作累成马&#xff0c;回家只想躺着&#xff1b;其二则是感觉GH基础系列基本上也介绍得差不多了&#xff0c;电…

1分钟实现 CLIP + Annoy + Gradio 文搜图+图搜图 系统

多模态图文搜索系统 CLIP 进行 Text 和 Image 的语义EmbeddingAnnoy 向量数据库实现树状结构索引来加速最近邻搜索Gradio 轻量级的机器学习 Web 前端搭建 文搜图 图搜图 CLIP图像语义提取功能&#xff01;

微信小程序餐饮外卖系统设计与实现

摘 要 随着现在的“互联网”的不断发展。现在传统的餐饮业也朝着网络化的方向不断的发展。现在线上线下的方式来实现餐饮的获客渠道增加&#xff0c;可以更好地帮助餐饮企业实现更多、更广的获客需求&#xff0c;实现更好的餐饮销售。截止到2021年末&#xff0c;我国的外卖市场…

Go语言基础语法|疑难分析及相关补充

疑难分析 1.对于range遍历的理解 eg&#xff1a; package main import "fmt" func main() { nums : []int{2, 3, 4} sum : 0 for i, num : range nums { sum num if num 2 { fmt.Println("index:", i, "num:", num) } } …

数据结构 -作用及基本概念

为什么要使用数据结构 学习数据结构是计算机科学和软件工程领域中非常重要的一门课程。以下是学习数据结构的几个重要原因&#xff1a; 组织和管理数据&#xff1a;数据结构提供了一种组织和管理数据的方式。通过学习不同的数据结构&#xff0c;你可以了解如何有效地存储和操作…

Python Tcp编程

网络连接与通信是我们学习任何编程语言都绕不过的知识点。Python 也不例外&#xff0c;本文就介绍因特网的核心协议 TCP &#xff0c;以及如何用 Python 实现 TCP 的连接与通信。 TCP 协议 TCP协议&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#…

Flutter关于StatefulWidget中State刷新时机的一点实用理解

刚入门flutter开发&#xff0c;使用StatefulWidget踩了很多坑&#xff0c;就我遇到典型问题谈谈见解。 1.initState方法只会在控件初始化的时候执行一遍。 2.控件内部执行setState方法&#xff0c;则会每次执行build方法。 3.控件销毁会执行dispose方法&#xff0c;所以一些…

2023年6月电子学会Python等级考试试卷(三级)答案解析

青少年软件编程(Python)等级考试试卷(三级) 一、单选题(共25题,共50分) 1. 请选择,下面代码运行之后的结果是?( ) a = 2 b = 4 try: c = a * b print(c) except: print(程序出错!) else: print(程序正确!) A.

大模型的能力边界在哪里?

随着人工智能领域的不断发展&#xff0c;大型神经网络模型已经成为了研究和应用中的主要工具之一。这些大模型&#xff0c;尤其是像GPT-3这样的巨型语言模型&#xff0c;展示了令人印象深刻的自然语言处理能力&#xff0c;甚至能够生成高质量的文本、回答问题、模仿不同的写作风…

从入门到精通,30天带你学会C++【第六天:与或非三兄弟和If判断语句(博主目前最长文章,2514字)】(学不会你找我)

目录 前言 计算机里的真和假 与或非三兄弟 与运算&#xff08;&&&#xff09; 具体说明表格&#xff1a; 举个栗子1&#xff1a; 或运算&#xff08;||&#xff09; 具体说明表格&#xff1a; 举个栗子2&#xff1a; 非运算&#xff08;!&#xff09; 具体…

Linux之超强16进制命令:xxd(三十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Win 教程 Win7实现隔空投送

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

独家首发!openEuler 主线集成 LuaJIT RISC-V JIT 技术

RISC-V SIG 预期随主线发布的 openEuler 23.09 创新版本会集成 LuaJIT RISC-V 支持。本次发版将提供带有完整 LuaJIT 支持的 RISC-V 环境并带有相关软件如 openResty 等软件的支持。 随着 RISC-V SIG 主线推动工作的进展&#xff0c;LuaJIT 和相关软件在 RISC-V 架构下的支持也…