el-upload多图上传 多文件上传 on-change事件多次触发问题解决

el-upload多图上传 多文件上传 on-change事件多次触发问题解决


在使用 el-upload上传文件时,on-change会触发二次事件,一次是ready状态,一次是success状态

 <div id="app">
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="true" :file-list="fileList" 
      :on-change="imageFileChange" ref="uploadFileRef" multiple>
      <el-button size="mini" style="margin-right:10px">上传文件</el-button>
    </el-upload>
  </div>
  <script>
    let app = new Vue({
      el: "#app",
      data() {
        return {
          fileList: [],
          uploadLoading: null
        }
      },
      methods: {
        imageFileChange(file, fileList) {
          console.log(fileList[0].status);
          console.log(new Date().toLocaleString());
        }
      }
    })
  </script>

在这里插入图片描述
触发success状态的原因是开启了自动上传 :auto-upload="true" ,关闭自动上传就不会触发success了。
但我们上传多张图片时,只想一次性上传完,而不是触发一次 on-change事件就上传一次,那要怎么做呢?
方法就是防抖

imageFileChange(file, fileList) {
	if (file.status !== 'ready') return // 阻止上传成功的触发
	console.log(file.status)
	if (this.timer) return
	this.timer = setTimeout(() => {
		this.$confirm('是否覆盖上传?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			this.uploadLoading = this.$loading({
				lock: true,
				text: '上传中',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$refs.uploadFileRef.submit()
		}).catch(() => {
		}).finally(() => {
			this.uploadLoading.close()
			this.timer = null
		})
	},100)
}

在这里插入图片描述

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
实现多文件上传的方式有很多种,下面我将介绍一种基于 Vue 和 Spring Boot 的实现方式,使用的是 Element UI 的上传组件 el-upload前端实现: 1. 在 Vue 组件中引入 Element UI 的 el-upload 组件。 ```vue <template> <el-upload class="upload-demo" action="/api/upload" :multiple="true" :on-change="handleUploadChange" :on-remove="handleUploadRemove" :file-list="fileList"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> ``` 2. 在 Vue 组件中定义 fileList 数组,用于存储上传的文件列表。 ```vue <script> export default { data() { return { fileList: [] } }, methods: { handleUploadChange(file, fileList) { this.fileList = fileList }, handleUploadRemove(file, fileList) { this.fileList = fileList } } } </script> ``` 3. 在 Vue 组件中定义 handleUploadChange 和 handleUploadRemove 方法,用于监听上传文件的变化和删除文件的操作,更新 fileList 数组。 后端实现: 1. 在 Spring Boot 项目中定义上传文件的接口。 ```java @RestController @RequestMapping("/api") public class FileUploadController { @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile[] files) { // TODO: 处理上传的文件 return ResponseEntity.ok("上传成功"); } } ``` 2. 在接口中使用 @RequestParam 注解接收上传的文件,可以使用 MultipartFile 类型的数组来接收多个文件。接收到文件后,可以根据需要进行处理,例如保存到本地磁盘或上传到云存储服务。 3. 在 application.properties 文件中配置文件上传的相关参数。 ```properties # 文件上传配置 spring.servlet.multipart.max-file-size=500KB spring.servlet.multipart.max-request-size=100MB spring.servlet.multipart.enabled=true ``` 其中,max-file-size 和 max-request-size 分别设置了单个文件和总文件大小的最大值,enabled 表示是否启用文件上传功能。 以上就是基于 Vue 和 Spring Boot 的多文件上传实现方式,希望能对你有所帮助。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值