当前位置: 首页 > 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】学习资源 首先是官网…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

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

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

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...