【UI】饿了么 el-upload如何上传到不同的路径, 根据不同情况上传指不同的接口,不同的路径

在 Element UI 的 Upload 组件中,可以通过在 el-upload 组件中定义 before-upload 回调函数,然后根据上传文件类型等条件在函数中改变 action 属性来实现上传到不同的路径。

template中

<el-upload  ref="upload"class="avatar-uploader"  :before-upload="beforeAvatarUpload"  :show-file-list="false"  :on-success="handleAvatarSuccess"  
>  <el-button size="small" type="primary">点击上传</el-button>  
</el-upload>

script中

methods: {  beforeAvatarUpload() {  if (判断条件) {  this.$refs.upload.action = 'https://example.com/upload/image'; // JPG文件上传到不同的路径  } else {  this.$refs.upload.action = 'https://example.com/upload/other'; // 其他文件上传到不同的路径  }  },  handleAvatarSuccess() {  // 上传成功后的处理逻辑  }  
}

beforeAvatarUpload 方法会在每次上传文件之前被调用,然后根据文件类型和大小改变上传路径。其中 this.$refs.upload.action 改变了 Upload 组件的 action 属性,这样就可以根据不同的条件上传到不同的路径了

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

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

相关文章

【每日一题】689. 三个无重叠子数组的最大和-2023.11.19

题目&#xff1a; 689. 三个无重叠子数组的最大和 给你一个整数数组 nums 和一个整数 k &#xff0c;找出三个长度为 k 、互不重叠、且全部数字和&#xff08;3 * k 项&#xff09;最大的子数组&#xff0c;并返回这三个子数组。 以下标的数组形式返回结果&#xff0c;数组中…

for...of与for...in

for …in for…in循环主要是为遍历对象而设计的&#xff0c;不适用于遍历数组。 for…in循环有几个缺点 1.数组的键名是数字&#xff0c;但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。 2.for…in循环不仅遍历数字键名&#xff0c;还会遍历手动添加的其他键&…

4、FFmpeg命令行操作10

音视频处理流程 先看两条命令 ffmpeg -i test_1920x1080.mp4 -acodec copy -vcodec libx264 -s 1280x720 test_1280x720.flv ffmpeg -i test_1920x1080.mp4 -acodec copy -vcodec libx265 -s 1280x720 test_1280x720.mkv ffmpeg音视频处理流程

【设计原则篇】聊聊里氏替换原则

是什么 子类对象可以替换程序中父类对象出现的任何地方&#xff0c;并且保证原有程序逻辑的正确性不被破坏。 比如我们在实际开发中定义了数据读取的父类&#xff0c;子类可以进行在此功能的拓展、增强但是不能修改原有的内在含义。 里氏替换原则和多态的区别&#xff0c;多态…

拼图小游戏

运行出的游戏界面如下&#xff1a; User类 package domain;/*** ClassName: User* Author: Kox* Data: 2023/2/2* Sketch:*/ public class User {private String username;private String password;public User() {}public User(String username, String password) {this.user…

数据分析—将txt文件转为csv文件;将csv文件转为xls文件

txt文件转为csv文件转化代码&#xff1a; import csv# 输入txt文件路径 txt_file rC:\Users\ZARD\Desktop\daily-min-temperatures.txt# 输出csv文件路径 csv_file rC:\Users\ZARD\Desktop\daily-min-temperatures.csv# 打开txt文件以读取数据 with open(txt_file, r) as tx…

Flink(七)【输出算子(Sink)】

前言 今天是我写博客的第 200 篇&#xff0c;恍惚间两年过去了&#xff0c;现在已经是大三的学长了。仍然记得两年前第一次写博客的时候&#xff0c;当时学的应该是 Java 语言&#xff0c;菜的一批&#xff0c;写了就删&#xff0c;怕被人看到丢脸。当时就想着自己一年之后&…

八:ffmpeg命令提取像素格式和PCM数据

一、提取YUV #提取3秒数据&#xff0c;分辨率和源视频一致 fmpeg -i test_1280x720.mp4 -t 3 -pix_fmt yuv420p yuv420p_orig.yuv#提取3秒数据&#xff0c;分辨率转为320x240 ffmpeg -i test_1280x720.mp4 -t 3 -pix_fmt yuv420p -s 320x240 yuv420p_320x240.yuv 二、提取RGB…

Windows上搭建一个网站(基本生产环境)

前言 本博客记录的是Windows上一次网站搭建的过程&#xff0c;主要是在前端采用的是React&#xff0c;后端采用的是Flask&#xff0c;记录一下生产版本搭建流程和坑点&#xff0c;供有缘人一起进步&#xff0c;当然本博客还存在很多不足。 前端项目构建生产版本 以React为例…

将AI技术与VR元宇宙相结合的整体解决方案

当前人工智能与VR虚拟现实两大热门技术的融合&#xff0c;正引领着人类走向更智能、更数字化、更便捷、更快速的时代。将这两者结合&#xff0c;AI智能检索应用到VR教学中&#xff0c;将为教育带来前所未有的好处。 个性化教学体验 通过AI智能检索&#xff0c;VR教学可以针对每…

Pandas+Matplotlib 数据分析

利用可视化探索图表 一、数据可视化与探索图 数据可视化是指用图形或表格的方式来呈现数据。图表能够清楚地呈现数据性质&#xff0c; 以及数据间或属性间的关系&#xff0c;可以轻易地让人看图释义。用户通过探索图&#xff08;Exploratory Graph&#xff09;可以了解数据的…

实在智能携手中国电信翼支付,全球首款Agent智能体亮相2023数字科技生态大会

11月10日-13日&#xff0c;中国电信与广东省人民政府联合主办的“2023数字科技生态大会”在广州隆重举行。本届大会以“数字科技焕新启航”为主题&#xff0c;邀请众多生态合作伙伴全方位展示数字科技新成果&#xff0c;包括数字新消费、产业数字化、智能电子、人工智能大模型等…

em/px/rem/vh/vw 的区别?

px px表示像素&#xff0c;所谓像素就是呈现在显示器上的一个个小点&#xff0c;每个像素点都是大小等同的&#xff0c;所以像素为绝对长度单位。 在移动端中存在设备像素比&#xff0c;px实际显示的大小是不确定&#xff0c;之所以认为px为绝对单位&#xff0c;在于px的大小和…

K-Means算法进行分类

已知数据集D中有9个数据点&#xff0c;分别是&#xff08;1,2&#xff09;&#xff0c;(2,3), (2,1), (3,1),(2,4),(3,5),(4,3),(1,5),(4,2)。采用K-Means算法进行聚类&#xff0c;k2&#xff0c;设初始中心点为&#xff08;1.1,2.2&#xff09;&#xff0c;&#xff08;2.3,3.…

OpenAI发布会中不起眼的重大更新

上周&#xff0c;OpenAI的历史首届开发者大会上&#xff0c;OpenAI的首席执行官山姆奥特曼展示了一系列产品更新&#xff0c;包含了众多重磅功能&#xff0c;就算单独拿出来都能让科技圈震一震&#xff0c;一下能发布这么多也真是家底厚。 果不其然&#xff0c;接下来的一周&am…

Java拼图

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 创建一个代码类 和一个运行类 代码如下&#xff1a; package heima;import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import jav…

php正则表达式汇总

php正则表达式有"/pattern/“、”“、”$“、”.“、”[]“、”[]“、”[a-z]“、”[A-Z]“、”[0-9]“、”\d"、“\D”、“\w”、“\W”、“\s”、“\S”、“\b”、“*”、“”、“?”、“{n}”、“{n,}”、“{n,m}”、“\bword\b”、“(pattern)”、“x|y"和…

【数据标注】Label Studio用于机器学习标注

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、使用 Label Studio标注数据1.版本控制 二、Label Studio绑定机器学习后端三、重写机器学习后端四、通过api执行Label Studio动作 前言…

Hive语法,函数--学习笔记

1&#xff0c;排序处理 1.1cluster by排序 &#xff0c;在Hive中使用order by排序时是全表扫描&#xff0c;且仅使用一个Reduce完成。 在海量数据待排序查询处理时&#xff0c;可以采用【先分桶再排序】的策略提升效率。此时&#xff0c; 就可以使用cluster by语法。 cluster…

RocketMQ(三):集成SpringBoot

RocketMQ系列文章 RocketMQ(一)&#xff1a;基本概念和环境搭建 RocketMQ(二)&#xff1a;原生API快速入门 RocketMQ(三)&#xff1a;集成SpringBoot 目录 一、搭建环境二、不同类型消息1、同步消息2、异步消息3、单向消息4、延迟消息5、顺序消息6、带tag消息7、带key消息 一…