当前位置:   article > 正文

el upload组件 第二次上传请求无效,非clearFiles方法_el-upload clearfiles

el-upload clearfiles

开发时遇到一个业务需求:

导入时如果当前列表月份存在数据将会提示用户是否要覆盖当前数据,点击确定进行二次提交

直接调用 submit 会无响应,

  1. this.$confirm(`${response.msg},是否继续?`, '提示', {
  2. confirmButtonText: 确定,
  3. cancelButtonText: 取消,
  4. type: 'warning'
  5. }).then((res) => {
  6. // 直接提交会无响应
  7. this.$refs.upload.submit();
  8. }).catch(() => {})

查询其他资料会发现 大多数会让你 调用

 this.$refs["upload"].clearFiles()

这样的话会让用户重新添加,那么如何去节省该步骤呢? 

当第一次上传成功后回调 on-success 方法 可以获取到上传的文件,这时可以进行保存

 观察el-upload组件源码会发现组件内 存储时有固定的方法handleStart

el-upload组件部分源码:

 因此可以自行调用该方法,去主动触发handleStart()方法进行上传

最后贴上正确步骤

  1. this.$confirm(`${response.msg},是否继续?`, '提示', {
  2. confirmButtonText: 确定,
  3. cancelButtonText: 取消,
  4. type: 'warning'
  5. }).then((res) => {
  6. // 先删除
  7. this.$refs["upload"].clearFiles()
  8. this.$nextTick(() => {
  9. // 再导入
  10. this.$refs["upload"].handleStart(this.fileList[0].raw)
  11. this.isUpdateSupport = 1
  12. // 再提交上传
  13. this.$refs.upload.submit();
  14. })
  15. }).catch(() => {})
User-agent: *
Disallow: /
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/472991
推荐阅读
相关标签
  

闽ICP备14008679号