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

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...