JUpload.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <a-upload
  3. name="file"
  4. :multiple="true"
  5. :action="uploadAction"
  6. :headers="headers"
  7. :data="{'isup':1,'bizPath':bizPath}"
  8. :fileList="fileList"
  9. :beforeUpload="beforeUpload"
  10. @change="handleChange">
  11. <a-button>
  12. <a-icon type="upload"/>
  13. {{ text }}
  14. </a-button>
  15. </a-upload>
  16. </template>
  17. <script>
  18. import Vue from 'vue'
  19. import {ACCESS_TOKEN} from "@/store/mutation-types"
  20. const FILE_TYPE_ALL = "all"
  21. const FILE_TYPE_IMG = "image"
  22. const FILE_TYPE_TXT = "file"
  23. const uidGenerator = () => {
  24. return '-' + parseInt(Math.random() * 10000 + 1, 10);
  25. }
  26. const getFileName = (path) => {
  27. if (path.lastIndexOf("\\") >= 0) {
  28. let reg = new RegExp("\\\\", "g");
  29. path = path.replace(reg, "/");
  30. }
  31. return path.substring(path.lastIndexOf("/") + 1);
  32. }
  33. export default {
  34. name: 'JUpload',
  35. data() {
  36. return {
  37. uploadAction: window._CONFIG['domianURL'] + "/sys/common/upload",
  38. urlDownload: window._CONFIG['domianURL'] + "/sys/common/download/",
  39. headers: {},
  40. fileList: []
  41. }
  42. },
  43. props: {
  44. text: {
  45. type: String,
  46. required: false,
  47. default: "点击上传"
  48. },
  49. fileType: {
  50. type: String,
  51. required: false,
  52. default: FILE_TYPE_ALL
  53. },
  54. /*这个属性用于控制文件上传的业务路径*/
  55. bizPath: {
  56. type: String,
  57. required: false,
  58. default: "temp"
  59. },
  60. value: {
  61. type: String,
  62. required: false
  63. },
  64. //此属性被废弃了
  65. triggerChange: {
  66. type: Boolean,
  67. required: false,
  68. default: false
  69. },
  70. },
  71. watch: {
  72. value(val) {
  73. this.initFileList(val)
  74. }
  75. },
  76. created() {
  77. const token = Vue.ls.get(ACCESS_TOKEN);
  78. this.headers = {"X-Access-Token": token}
  79. },
  80. methods: {
  81. initFileList(paths) {
  82. if (!paths || paths.length == 0) {
  83. return [];
  84. }
  85. let fileList = [];
  86. let arr = paths.split(",")
  87. for (var a = 0; a < arr.length; a++) {
  88. fileList.push({
  89. uid: uidGenerator(),
  90. name: getFileName(arr[a]),
  91. status: 'done',
  92. url: this.urlDownload + arr[a],
  93. response: {
  94. status: "history",
  95. message: arr[a]
  96. }
  97. })
  98. }
  99. this.fileList = fileList
  100. },
  101. handlePathChange() {
  102. let uploadFiles = this.fileList
  103. let path = ''
  104. if (!uploadFiles || uploadFiles.length == 0) {
  105. path = ''
  106. }
  107. let arr = [];
  108. for (var a = 0; a < uploadFiles.length; a++) {
  109. arr.push(uploadFiles[a].response.message)
  110. }
  111. if (arr.length > 0) {
  112. path = arr.join(",")
  113. }
  114. this.$emit('change', path);
  115. },
  116. beforeUpload(file) {
  117. var fileType = file.type;
  118. if (fileType === FILE_TYPE_IMG) {
  119. if (fileType.indexOf('image') < 0) {
  120. this.$message.warning('请上传图片');
  121. return false;
  122. }
  123. } else if (fileType === FILE_TYPE_TXT) {
  124. if (fileType.indexOf('image') >= 0) {
  125. this.$message.warning('请上传文件');
  126. return false;
  127. }
  128. }
  129. //TODO 扩展功能验证文件大小
  130. return true
  131. },
  132. handleChange(info) {
  133. console.log("--文件列表改变--")
  134. let fileList = info.fileList
  135. if (info.file.status === 'done') {
  136. if (info.file.response.success) {
  137. fileList = fileList.map((file) => {
  138. if (file.response) {
  139. file.url = this.urlDownload + file.response.message;
  140. }
  141. return file;
  142. });
  143. }
  144. this.$message.success(`${info.file.name} 上传成功!`);
  145. } else if (info.file.status === 'error') {
  146. this.$message.error(`${info.file.name} 上传失败.`);
  147. } else if (info.file.status === 'removed') {
  148. this.handleDelete(info.file)
  149. }
  150. this.fileList = fileList
  151. if (info.file.status === 'done' || info.file.status === 'removed') {
  152. this.handlePathChange()
  153. }
  154. },
  155. handleDelete(file) {
  156. //如有需要新增 删除逻辑
  157. console.log(file)
  158. },
  159. },
  160. model: {
  161. prop: 'value',
  162. event: 'change'
  163. }
  164. }
  165. </script>
  166. <style scoped>
  167. </style>