el-upload上传文件不用并发

时间: 2023-09-29 18:05:03 浏览: 47

el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传.pdf

5星 · 资源好评率100%

在本文中，我们将深入探讨如何使用`el-upload`组件实现多文件一次性上传，同时携带JSON数据，并自定义上传事件，不依赖`action`属性。`el-upload`是Element UI库中的一个组件，用于文件上传操作，提供了丰富的配置选项和回调函数，非常适合在Web应用中进行复杂的文件管理。 ### 情况一：简单表单上传在这种情况下，我们有一个基本的文件上传表单，包含一个文件选择器和一个提交按钮。`el-upload`组件的配置如下： ```html <el-upload ref="upload" :action="uploadUrl" :file-list="fileList" :auto-upload="false" :http-request="uploadFile"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload> <el-button type="primary" @click="submitUpload('form')">确定</el-button> ``` - `ref="upload"`：为`el-upload`组件创建一个引用，以便在JavaScript中访问它。 - `:action`：通常用于指定文件上传的URL，但在这个例子中我们不使用它。 - `:auto-upload="false"`：禁用自动上传，允许我们自定义上传逻辑。 - `:http-request="uploadFile"`：覆盖默认的文件上传行为，使用`uploadFile`方法处理上传。在`methods`中，我们定义了`uploadFile`和`submitUpload`方法： ```javascript // 自定义上传，以uuid为key uploadFile (file) { this.fileData.append(uuid.v1(), file.file) // 使用uuid作为键 }, // 文件上传并提交表单 submitUpload (formName) { this.$refs[formName].validate((valid) => { if (valid) { // 构建FormData对象，包含表单数据和文件 this.fileData = new FormData() this.fileData.append('desc', this.form.desc) let string = JSON.stringify(this.form.array) this.fileData.append('participantListJSONStr', string ) this.$refs.upload.submit() // 执行上传 this.$service.reviewxxx.uploadFile(this.fileData) // 使用axios或其他HTTP库发送请求 .then(res => { if (res.code === '200') { this.$message.success('上传成功') } }).catch(() => {}) } else { return false } }) } ``` ### 情况二：复杂表单上传对于更复杂的表单，可能有多个文件选择器，我们不再使用`submit`方法。此时，我们可以监听`on-change`事件来处理文件选择： ```html <el-upload action="#" :file-list="fileList" :show-file-list="false" :auto-upload="false" :on-change="handleChange"> 选择文件 </el-upload> ``` 在`methods`中，我们需要处理`handleChange`事件： ```javascript handleChange (file, fileList) { if (fileList.length > 1) { // 限制只能选择一个文件 fileList.splice(0, 1) } this.fileList = fileList this.info.fileName = file.name this.info.operateValue = uuid.v1() + '/' + file.name this.info.fileList = fileList }, // 自定义提交表单逻辑 submitUpload () { // 在这里处理文件上传和表单提交 } ``` 在这个例子中，`handleChange`方法用来更新文件列表，并根据业务需求处理文件选择的逻辑。当需要上传文件时，我们需要在`submitUpload`方法中实现文件的上传操作，这通常会涉及到遍历`fileList`，构建`FormData`对象，然后使用HTTP库发送请求。总结起来，通过自定义`http-request`属性或监听`on-change`事件，我们可以灵活地控制`el-upload`组件的文件上传行为，同时将JSON数据和其他表单字段一起发送到服务器。这种方法尤其适用于需要在上传过程中执行额外逻辑或者与后端API交互的场景。

可以通过设置 el-upload 的 prop 属性中的 limit 为 1，以确保每次只能上传一个文件。这样做将禁用并发上传。代码如下： <el-upload :action="uploadUrl" :limit="1" :on-change="handleChange" > <el-button>选择文件</el-button> </el-upload>

阅读全文

el-upload上传文件不用并发

相关推荐

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

配合elementuiupload组件支持分片上传功能

el-upload 上传文件 自动

el-upload上传多个文件处理

初识el-upload组件：实现简单的文件上传功能

el-upload上传七牛云返回顺序错乱解决方法

el-upload 图片可旋转 Element UI

JSP源码——[上传下载]宏软JSP上传系统 v2.0完美版_upload-v2.zip

Element-UI上传组件文件管理：如何实现高效的文件筛选与排序

Element-UI多文件上传全攻略：从新手到专家的10大秘诀

揭秘Element-UI上传组件：前端多文件上传的7大技巧

Element-UI上传组件高级秘籍：突破单文件上传的限制

Element-UI上传组件与后端整合：构建无缝文件上传流程

Element-UI文件上传限制与验证：确保文件质量与安全的6大步骤

Element-UI上传组件前端处理：文件预览、缩略图与分片上传全攻略

精通Element-UI上传：打造企业级文件管理系统的关键步骤

Element-UI文件上传与进度条：提升用户体验的4个关键点

Element-UI上传组件云存储集成：实现云端文件管理的快速指南

el upload this.$refs.uploadPhoto.submit() 串行执行

最新推荐

基于freeRTOS和STM32F103x的手机远程控制浴室温度系统设计源码

LABVIEW程序实例-web写数据.zip

LABVIEW程序实例-前面板对象常用属性.zip

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

el-upload 上传文件自动