当前位置:   article > 正文

(实战-改bug)element ui Upload组件 上传一次后,再次点击上传 没反应_el-upload 不进

el-upload 不进

 今日修改bug时,上传组件点击上传,上传成功后,再次点击上传,没有反应,二次上传时http-request的方法没有进入。

原因是:第一次上传文件后,浏览器还保存着我们已经上传的文件,所以要想继续上传文件,就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件,来看看代码吧

  1. <div>
  2. <el-upload
  3. ref="fileUploadBtn"
  4. class="upload-div right-btn-list-num"
  5. action
  6. :limit="1"
  7. :show-file-list="false"
  8. :file-list="fileList"
  9. :on-success="handleSuccess"
  10. :http-request="uploadFile"
  11. >
  12. <el-button size="mini" type="default" :loading="isUploading">重新上传</el-button>
  13. </el-upload>
  14. </div>
  15. handleSuccess(res, file) {
  16. this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录
  17. },
  18. // 单个图片保存
  19. async uploadFile(item) {
  20. console.log(item, 1111);
  21. const { v4: uuidv4 } = require('uuid');
  22. this.isUploading = true;
  23. let { status, message, content } = await fileRuleGet(this.navbarUnit.navbarUnitId);
  24. if (status) {
  25. //1 获取扩展名
  26. let fileArr = item.file.name.split('.');
  27. let extra = fileArr[fileArr.length - 1];
  28. //2.获取上传参数
  29. const { bucketName, path } = content;
  30. // 3.拼接参数
  31. let params = new FormData();
  32. params.append('file', item.file);
  33. params.append('path', `${path}${uuidv4()}.${extra}`);
  34. params.append('bucketName', bucketName);
  35. params.append('unitId', this.navbarUnit.navbarUnitId);
  36. // 4.push上传
  37. fileUploadApi(params).then(res => {
  38. this.onHandleSucces([res], item.file);
  39. });
  40. } else {
  41. onError(message);
  42. }
  43. this.isUploading = false;
  44. },
  45. onHandleSucces(resArr, file) {
  46. // let arr = []
  47. resArr.map((res, index) => {
  48. console.log(file.name);
  49. let fileArr = file.name.split('.');
  50. console.log(fileArr);
  51. let extra = fileArr.pop();
  52. console.log(extra);
  53. let fileSize = (file.size / 1024).toFixed(0);
  54. const fileObj = {
  55. file_name: fileArr.join('.'), //文件名称
  56. file_size: fileSize, //文件大小
  57. file_format: extra, //文件名后缀
  58. file_suffix: extra,
  59. file_path: `${res.content.bucketName}/${res.content.path}`,
  60. store_id: res.content.storeId
  61. };
  62. this.detailsruleForm.file_name = file.name;
  63. this.detailsruleForm.file_size = fileObj.file_size;
  64. this.detailsruleForm.file_format = fileObj.file_format;
  65. this.detailsruleForm.file_suffix = fileObj.file_suffix;
  66. this.detailsruleForm.file_path = fileObj.file_path;
  67. this.detailsruleForm.store_id = fileObj.store_id;
  68. });
  69. this.isUploading = false;
  70. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/472972
推荐阅读
相关标签
  

闽ICP备14008679号