当前位置: 首页 > 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')

http://www.lryc.cn/news/496879.html

相关文章:

  • Python实现网站资源批量下载【可转成exe程序运行】
  • 《JavaScript高级程序设计》读书笔记 20
  • ASP.NET Core项目中使用SqlSugar连接多个数据库的方式
  • Java面试八股文(精选、纯手打)
  • 工程设计行业内外网文件交换解决方案:FileLink助力高效、安全的跨网协作
  • Qt 2D绘图之三:绘制文字、路径、图像、复合模式
  • 配置宝塔php curl 支持http/2 发送苹果apns消息推送
  • Redis服务配置文件 redis.conf 更新修改配置参数说明
  • Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”
  • Redis+Caffeine 多级缓存数据一致性解决方案
  • vscode ctrl+/注释不了css
  • 《山海经》:北山
  • oracle中删除指定前缀的表
  • 解决 Flutter Dio合并请求多个接口,如果一个接口500,那么导致其他请求不在执行
  • The selected directory is not a valid home for Go SDK
  • 基于云模型的车辆行驶速度估计算法matlab仿真
  • MySQL有哪些日志?
  • Axios:现代JavaScript HTTP客户端
  • python学opencv|读取视频(一)灰度视频制作和保存
  • 【Rust WebAssembly 入门实操遇到的问题】
  • 掌握CMake中的变量:设置、使用及实际应用示例详解
  • React基础知识三 router路由全指南
  • [VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动
  • k8s Quality of Service
  • 顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测(Maltab)
  • 什么语言适合做 Serverless 开发?
  • 使用OpenCV和卡尔曼滤波器进行实时活体检测
  • 【25春招前端八股文】——JS数据类型检测方式
  • Kafka的学习路径规划
  • linux模拟试题