【案例4】element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题

本文讲述了在Element-Upload组件中遇到的重复上传问题,关键在于清除`fileList`。解决方法是在`on-success`钩子中使用`clearFiles()`,确保每次成功上传后旧文件被移除,以便后续重新上传。

element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题

今天在开发的时候,文件上传都没有问题,但是修改文件数据后,再次上传时就没有反应了,导致整个问题的原因是因为你没有清除当前 fileList,导致它一直保存这你第一次上传文件的信息,只要你把他一刀切掉就好了!

那么问题来了,应该怎么清除呢!所以要想继续上传文件,就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件 看下面的代码:

<el-upload
   class="upload-demo"
   ref='upload'
   action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-success="handleSuccess"
   multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
 </el-upload>

在上传成功的方法中这样写:

handleSuccess(res, file) {
  this.$refs.upload.clearFiles() //上传成功之后清除历史记录
}

这样就能解决你不能继续上传的问题了!

在使用 `element-plus` 的 `el-upload` 组件时,如果尝试上传相同文件(例如相同的文件名和内容),第二次及之后的上传可能会失效。这通常是因为浏览器缓存机制或组件内部对重复文件的处理逻辑导致的。 ### 解决方法 1. **修改文件唯一标识** 通过为每次上传文件生成唯一的标识符(如 `uid`),可以绕过组件对重复文件的判断机制。这可以通过结合 `before-upload` 钩子函数来实现: ```vue <template> <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError" > <el-button>选择文件</el-button> </el-upload> </template> <script setup> import { genFileId } from 'element-plus'; const handleBeforeUpload = (file) => { // 为文件添加唯一标识 file.uid = genFileId(); return true; // 返回 true 表示允许上传 }; const handleSuccess = (response, file, fileList) => { console.log('上传成功:', response); }; const handleError = (error, file, fileList) => { console.error('上传失败:', error); }; </script> ``` 2. **清除文件列表并重新触发上传** 如果需要多次上传相同文件,可以在每次上传前手动清空文件列表,并重新设置文件状态: ```vue <template> <el-upload ref="uploadRef" :action="uploadUrl" :auto-upload="false" :file-list="fileList" v-model:file-list="fileList" > <el-button @click="uploadFile">上传文件</el-button> </el-upload> </template> <script setup> import { ref } from 'vue'; import { genFileId } from 'element-plus'; const uploadRef = ref(); const fileList = ref([]); const uploadFile = () => { // 清空现有文件列表 uploadRef.value.clearFiles(); // 模拟选择新文件 const newFile = { name: 'test.jpg', size: 1024, type: 'image/jpeg', uid: genFileId(), // 生成唯一标识 }; // 手动添加文件上传队列 uploadRef.value.handleStart(newFile); // 提交上传 uploadRef.value.submit(); }; </script> ``` 3. **使用 `v-model:file-list` 而非 `:file-list`** 在某些情况下,直接使用 `:file-list` 可能会导致文件状态无法正确更新。改用 `v-model:file-list` 可以确保双向绑定文件列表的状态,避免因数据不同步导致的问题。 ```vue <el-upload v-model:file-list="fileList" :action="uploadUrl" :limit="1" :on-exceed="handleExceed" :auto-upload="false" > <el-button>上传文件</el-button> </el-upload> ``` 4. **自定义 `http-request` 方法** 通过自定义 `http-request`,可以完全控制文件上传过程,避免依赖默认行为可能带来的问题: ```vue <template> <el-upload :http-request="customUpload" :auto-upload="false" :file-list="fileList" v-model:file-list="fileList" > <el-button>上传文件</el-button> </el-upload> </template> <script setup> import { ref } from 'vue'; const fileList = ref([]); const uploadUrl = 'https://your.upload.url'; // 替换为实际上传地址 const customUpload = async (params) => { const { file } = params; const formData = new FormData(); formData.append('file', file); try { const response = await fetch(uploadUrl, { method: 'POST', body: formData, }); if (response.ok) { console.log('上传成功'); } else { console.error('上传失败'); } } catch (error) { console.error('网络错误:', error); } }; </script> ``` ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值