c3d5d8be585f5a425e2fb51779737730f7e69751.svn-base 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!--
  2. <upload ref="uploadFile" url="/biz/hzz/basic/file/upload?bizId=" @uploadOver="uploadOver"></upload>
  3. if (this.$refs.uploadFile.submitUpload(id)) {
  4. // true上传列表为空,直接执行结束操作
  5. this.insertOver()
  6. }
  7. -->
  8. <template>
  9. <div style="width: 360px;margin: 20px auto;">
  10. <el-upload
  11. ref="upload"
  12. :action="url"
  13. :headers="header"
  14. :accept="accept"
  15. :disabled="feedback"
  16. :auto-upload="true"
  17. multiple
  18. :on-change="changeFileList"
  19. :on-success="uploadSuccess"
  20. :on-error="upError"
  21. >
  22. <el-button size="small" :disabled="feedback" type="primary" style="margin: 0">上传</el-button>
  23. </el-upload>
  24. </div>
  25. </template>
  26. <script>
  27. export default {
  28. props: {
  29. "url":{
  30. type: String,
  31. default:''
  32. },
  33. "accept":{
  34. type: String,
  35. default:''
  36. },
  37. "feedback":{
  38. type: Boolean,
  39. default: false
  40. }
  41. }, // 上传基础路径
  42. data() {
  43. return {
  44. fileList: [],
  45. resList: [],
  46. length: 0, // 上传列表长度
  47. sum: 0, // 上传成功次数
  48. allurl: "", // 上传完整路径
  49. header: {
  50. 'persId': localStorage.getItem('userid'),
  51. 'accessToken' : localStorage.getItem('accessToken')
  52. },
  53. };
  54. },
  55. computed:{
  56. userid(){
  57. return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
  58. }
  59. },
  60. methods: {
  61. // 初始化,
  62. init() {
  63. this.$refs.upload.clearFiles();
  64. this.length = 0;
  65. this.sum = 0;
  66. this.allurl = "";
  67. this.resList = [];
  68. },
  69. // 开始上传,文件列表为空直接返回turn表示结束,不为空触发上传并返回false,由uploadOver判断结束时间
  70. submitUpload(id) {
  71. this.allurl = this.url + id;
  72. if (this.length) {
  73. this.$nextTick(() => {
  74. this.$refs.upload.submit();
  75. });
  76. return false;
  77. } else {
  78. return true;
  79. }
  80. },
  81. // 上传出错,向上触发结束
  82. upError(err, file, fileList) {
  83. this.$message.error("上传出错,请修改文件!");
  84. this.$emit("uploadOver");
  85. this.init();
  86. },
  87. // 全部上传成功,向上触发结束
  88. uploadSuccess(response, file, fileList) {
  89. if(!response.success){
  90. this.$message.error("上传出错,请修改文件!");
  91. this.$emit("uploadOver");
  92. this.init();
  93. return
  94. }
  95. this.resList.push(response.data);
  96. console.log(this.resList);
  97. this.sum = this.sum + 1;
  98. if (this.sum == this.length) {
  99. this.$emit("uploadOver", this.resList);
  100. this.init();
  101. }
  102. },
  103. // 及时更新列表长度
  104. changeFileList(file, fileList) {
  105. this.length = fileList.length;
  106. }
  107. }
  108. };
  109. </script>