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

el-upload上传多个文件,一次请求,Django接收

1、:file-list="fileList"  :on-change="handleChange" 将文件赋值到fileList

2、 :auto-upload="false"  手动触发上传 写个按钮点击执行这个 this.$refs.upload.submit();

3、自己写上传,不会再触发上传成功或失败回调

4、 request.FILES.getlist('file') 获取上传的多个文件,循环读取写入文件中

 <el-uploadclass="upload-demo"ref="upload"action="":on-change="handleChange":file-list="fileList":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jmx/txt文件</div>
</el-upload><script>import axios from 'axios'export default{name:"StressTest",data() {return {fileList: []}},components:{},methods:{handleChange(file, fileList) {console.log(file, fileList);this.fileList = fileListconsole.log('=====',this.fileList)},submitUpload() {  //上传let formData = new FormData();  //  用FormData存放上传文件this.fileList.forEach(file => {formData.append('file', file.raw)})this.fileList = []console.log('========',formData)this.$axios.post('/uploadfile/', formData).then((res) => {//手动上传无法触发成功或失败的钩子函数,因此这里手动调用console.log('========','success')this.handleUploadSuccess()}, (err) => {this.handleUploadError()})},handleUploadSuccess(){this.$refs.upload.clearFiles()alert('上传成功')},handleUploadError(){alert('上传失败')}// methods关闭}}
</script>

 下面试着还是上次触发多次请求呢

<el-uploadclass="upload-demo"ref="upload"action="":on-change="handleChange":on-success="handleUploadSuccess":on-error="handleUploadError":file-list="fileList":auto-upload="false":http-request="uploadFile"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jmx/txt文件</div>
</el-upload><script>import axios from 'axios'export default{name:"StressTest",data() {return {fileList: []}},components:{},methods:{submitUpload() {this.$refs.upload.submit();},handleChange(file, fileList) {console.log(file, fileList);this.fileList = fileListconsole.log('=====',this.fileList)},uploadFile(file) {  //上传let formData = new FormData();  //  用FormData存放上传文件this.fileList.forEach(file => {formData.append('file', file.raw)})console.log('========',formData)this.$axios.post('/uploadurl/', formData).then((res) => {//手动上传无法触发成功或失败的钩子函数,因此这里手动调用console.log('========','success')file.onSuccess(res)}, (err) => {file.onError(err)})},handleUploadSuccess(response, file, fileList){this.$refs.upload.clearFiles()alert('上传成功')},handleUploadError(err, file, fileList){alert('上传失败')}// methods关闭}}
</script>
def add_stressfile(request):data = {}for i in request.POST.lists():data[i[0]] = i[1][0]myFiles = request.FILES.getlist('file')print(myFiles)now = datetime.now()for myFile in myFiles:filename = str(now)[:-10].replace(' ', '_').replace(':', '') +'.txt'print(filename)file_path = os.path.join(settings.STRESS_ROOT, filename)fp = open(file_path, 'wb+')for i in myFile.chunks():# print(i)fp.write(i)fp.close()return HttpResponse(json.dumps({}), content_type='application/json')

相关文章:

el-upload上传多个文件,一次请求,Django接收

1、:file-list"fileList" :on-change"handleChange" 将文件赋值到fileList 2、 :auto-upload"false" 手动触发上传 写个按钮点击执行这个 this.$refs.upload.submit(); 3、自己写上传&#xff0c;不会再触发上传成功或失败回调 4、 request.FI…...

Python实现网站资源批量下载【可转成exe程序运行】

Python实现网站资源批量下载【可转成exe程序运行】 背景介绍解决方案转为exe可执行程序简单点说详细了解下 声明 背景介绍 发现 宣讲家网 的PPT很好&#xff0c;作为学习资料使用很有价值&#xff0c;所以想下载网站的PPT课件到本地&#xff0c;但是由于网站限制&#xff0c;一…...

《JavaScript高级程序设计》读书笔记 20

感谢点赞、关注和收藏&#xff01; 原始值包装类型 为了方便操作原始值&#xff0c;ECMAScript 提供了 3 种特殊的引用类型&#xff1a;Boolean、Number 和 String。每当用到某个原始值的方法或属性时&#xff0c;后台都会创建一个相应原始包装类型的对象&#xff0c;从而暴露…...

ASP.NET Core项目中使用SqlSugar连接多个数据库的方式

之前学习ASP.NETCore及SqlSugar时都是只连接单个数据库处理数据&#xff0c;仅需在Program文件中添加ISqlSugarClient的单例即可&#xff08;如下代码所示&#xff09;。 builder.Services.AddSingleton<ISqlSugarClient>(s > {SqlSugarScope sqlSugar new SqlSugar…...

Java面试八股文(精选、纯手打)

全国内大厂Java面试高频题库 本小册内容涵盖&#xff1a;Java基础&#xff0c;JVM&#xff0c;多线程&#xff0c;数据库&#xff08;MySQL/Redis&#xff09;SSM&#xff0c;Dubbo&#xff0c;网络&#xff0c;MQ&#xff0c;Zookeeper&#xff0c;Netty&#xff0c;微服务&a…...

工程设计行业内外网文件交换解决方案:FileLink助力高效、安全的跨网协作

在工程设计行业&#xff0c;文件交换和信息共享是项目顺利推进的关键。尤其是涉及复杂的设计图纸、技术方案、合同文件等重要资料时&#xff0c;如何确保文件在内外网之间的高效、安全传输&#xff0c;直接影响到项目的进度和质量。FileLink正是为此而生&#xff0c;它为工程设…...

Qt 2D绘图之三:绘制文字、路径、图像、复合模式

参考文章链接: Qt 2D绘图之三:绘制文字、路径、图像、复合模式 绘制文字 除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象…...

配置宝塔php curl 支持http/2 发送苹果apns消息推送

由于宝塔面板默认的php编译的curl未加入http2的支持&#xff0c;如果服务需要使用apns推送等需要http2.0的访问就会失败&#xff0c;所以重新编译php让其支持http2.0 编译方法&#xff1a; 一、安装nghttp2 git clone https://github.com/tatsuhiro-t/nghttp2.git cd nghttp…...

Redis服务配置文件 redis.conf 更新修改配置参数说明

场景&#xff1a; 在安装redis服务中&#xff0c;默认的配置项通常不能实际使用&#xff0c;需要修改一些配置参数 修改配置参数 1、拿到 redis.cnf 文件&#xff0c;此文件通常在 redis 项目源码的第一级目录下 2、修改配置内容&#xff0c;主要修改项如下 protect…...

Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”

这两种主题继承关系有明显的不同&#xff0c;具体区别如下&#xff1a; Theme.AppCompat vs android:Theme.Material.Light.NoActionBar Theme.AppCompat 是 AppCompat 支持库提供的主题&#xff0c;目的是提供向后兼容的支持&#xff0c;适用于较早版本的 Android&#xff08…...

Redis+Caffeine 多级缓存数据一致性解决方案

RedisCaffeine 多级缓存数据一致性解决方案 背景 之前写过一篇文章RedisCaffeine 实现两级缓存实战&#xff0c;文章提到了两级缓存RedisCaffeine可以解决缓存雪等问题也可以提高接口的性能&#xff0c;但是可能会出现缓存一致性问题。如果数据频繁的变更&#xff0c;可能会导…...

vscode ctrl+/注释不了css

方式一.全部禁用插件排查问题. 方式二.打开首选项的json文件,注释掉setting.json,排查是哪一行配置有问题. 我的最终问题:需要将 "*.vue": "vue",改成"*.vue": "html", "files.associations": { // "*.vue": &qu…...

《山海经》:北山

《山海经》&#xff1a;北山 北山一经单狐山求如山&#xff08;水马&#xff1a;形状与马相似&#xff0c;滑鱼&#xff1a;背部红色&#xff09;带山&#xff08;䑏疏&#xff1a;似马&#xff0c;一只角&#xff0c;鵸鵌&#xff1a;状乌鸦五彩斑斓&#xff0c;儵鱼&#xff…...

oracle中删除指定前缀的表

近期接手做的项目&#xff0c;发觉数据库中有许多多余的表。究其原因&#xff0c;应该是同事贪图方便&#xff0c;将过去做过的项目复制粘贴&#xff0c;然后修修改改。包括数据库也是克隆过来的&#xff0c;然后又没有删除本项目多余的表&#xff0c;结果经过几个轮回&#xf…...

解决 Flutter Dio合并请求多个接口,如果一个接口500,那么导致其他请求不在执行

Flutter Dio如何自定义拦截异常 应用场景 我们一般会统一拦截DioExceptionType 如400&#xff0c;403&#xff0c;500 等错误 但有时候&#xff0c;有个地方合并请求多个接口&#xff0c;如果一个接口500&#xff0c;那么导致其他请求不在执行&#xff0c;因为统一拦截了500&…...

The selected directory is not a valid home for Go SDK

在idea里配置go语言的环境时&#xff0c;选择go语言的安装目录&#xff0c;一直提示这个 The selected directory is not a valid home for Go SDK后来查了一下&#xff0c;发现原来idea识别不出来 需要改一下配置文件&#xff0c;找到go环境的安装目录&#xff0c;我是默认安…...

基于云模型的车辆行驶速度估计算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于云模型的车辆行驶速度估计算法matlab仿真。在智能交通系统中&#xff0c;车辆行驶速度的准确估计对于交通流量监测、安全预警、自动驾驶辅助等方面具有极为重…...

MySQL有哪些日志?

MySQL主要有三种日志&#xff1a;undo log、redo log、binlog。前两种是InnoDB特有的&#xff0c;binlog是MySQL的Server层中的。 Buffer Pool buffer pool是MySQL的缓冲池&#xff0c;里面存储了数据页、索引页、undo页等&#xff08;与数据库不一致的即为脏页&#xff09;。…...

Axios:现代JavaScript HTTP客户端

在当今的Web开发中&#xff0c;与后端服务进行数据交换是必不可少的。Axios是一个基于Promise的HTTP客户端&#xff0c;用于浏览器和node.js&#xff0c;它提供了一个简单的API来执行HTTP请求。本文将介绍Axios的基本概念、优势、安装方法、基本用法以及如何使用Axios下载文件。…...

python学opencv|读取视频(一)灰度视频制作和保存

【1】引言 上一次课学习了用opencv读取图像&#xff0c;掌握了三个函数&#xff1a;cv.imread()、cv.imshow()、cv.imwrite() 相关链接如下&#xff1a; python学opencv|读取图像-CSDN博客 这次课我们继续&#xff0c;来学习用opencv读取视频。 【2】学习资源 首先是官网…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...