UploadButton.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <el-upload
  3. class="upload-button"
  4. :action="uploadUrl"
  5. :max-size="maxSize"
  6. :before-upload="handleBeforeUpload"
  7. :show-file-list="showFileList"
  8. :auto-upload="autoUpload"
  9. :disabled="disabled"
  10. ref="UploadComp"
  11. :onChange="onChange"
  12. :onRemove="onRemove"
  13. :multiple="false"
  14. :fileList="fileList"
  15. >
  16. <el-button :type="theme" :disabled="disabled" :loading="loading">{{
  17. btnContent
  18. }}</el-button>
  19. </el-upload>
  20. </template>
  21. <script>
  22. import { fileMD5 } from "@/plugins/md5";
  23. export default {
  24. name: "upload-button",
  25. props: {
  26. btnContent: {
  27. type: String,
  28. default: "选择",
  29. },
  30. format: {
  31. type: Array,
  32. default() {
  33. return ["jpg", "png"];
  34. },
  35. },
  36. maxSize: {
  37. type: Number,
  38. default: 20 * 1024 * 1024,
  39. },
  40. disabled: {
  41. type: Boolean,
  42. default: false,
  43. },
  44. theme: {
  45. type: String,
  46. default: "primary",
  47. },
  48. showFileList: {
  49. type: Boolean,
  50. default: false,
  51. },
  52. autoUpload: {
  53. type: Boolean,
  54. default: true,
  55. },
  56. },
  57. data() {
  58. return {
  59. loading: false,
  60. uploadUrl: "",
  61. res: {},
  62. fileList: [],
  63. };
  64. },
  65. methods: {
  66. checkFileFormat(fileType) {
  67. const _file_format = fileType.split(".").pop().toLocaleLowerCase();
  68. if (!this.format.length) return true;
  69. return this.format.some(
  70. (item) => item.toLocaleLowerCase() === _file_format
  71. );
  72. },
  73. async handleBeforeUpload(file) {
  74. this.attachmentName = file.name;
  75. if (file.size > this.maxSize) {
  76. this.handleExceededSize();
  77. return Promise.reject();
  78. }
  79. if (!this.checkFileFormat(file.name)) {
  80. this.handleFormatError();
  81. return Promise.reject();
  82. }
  83. return true;
  84. },
  85. handleFormatError() {
  86. const content = "只支持文件格式为" + this.format.join("/");
  87. this.res = {
  88. success: false,
  89. message: content,
  90. };
  91. this.loading = false;
  92. this.$emit("upload-error", this.res);
  93. },
  94. handleExceededSize() {
  95. const content =
  96. "文件大小不能超过" + Math.floor(this.maxSize / 1024) + "M";
  97. this.res = {
  98. success: false,
  99. message: content,
  100. };
  101. this.loading = false;
  102. this.$emit("upload-error", this.res);
  103. },
  104. async onChange(file, fileList) {
  105. console.log("onChange", file, fileList);
  106. this.fileList = [file];
  107. const md5 = await fileMD5(file.raw);
  108. this.$emit("file-change", {
  109. file: file.raw,
  110. md5,
  111. });
  112. },
  113. onRemove(file, fileList) {
  114. console.log("remove", file, fileList);
  115. if (!fileList.length) {
  116. this.$emit("file-change", { file: null, md5: null });
  117. }
  118. },
  119. },
  120. };
  121. </script>
  122. <style lang="scss">
  123. .upload-button {
  124. .el-upload {
  125. width: auto !important;
  126. }
  127. }
  128. </style>