index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import { VantComponent } from '../common/component';
  2. import { isImageFile, isVideo, chooseFile, isPromise } from './utils';
  3. import { chooseImageProps, chooseVideoProps } from './shared';
  4. VantComponent({
  5. props: Object.assign(Object.assign({ disabled: Boolean, multiple: Boolean, uploadText: String, useBeforeRead: Boolean, afterRead: null, beforeRead: null, previewSize: {
  6. type: null,
  7. value: 90
  8. }, name: {
  9. type: [Number, String],
  10. value: ''
  11. }, accept: {
  12. type: String,
  13. value: 'image'
  14. }, fileList: {
  15. type: Array,
  16. value: [],
  17. observer: 'formatFileList'
  18. }, maxSize: {
  19. type: Number,
  20. value: Number.MAX_VALUE
  21. }, maxCount: {
  22. type: Number,
  23. value: 100
  24. }, deletable: {
  25. type: Boolean,
  26. value: true
  27. }, showUpload: {
  28. type: Boolean,
  29. value: true
  30. }, previewImage: {
  31. type: Boolean,
  32. value: true
  33. }, previewFullImage: {
  34. type: Boolean,
  35. value: true
  36. }, imageFit: {
  37. type: String,
  38. value: 'scaleToFill'
  39. }, uploadIcon: {
  40. type: String,
  41. value: 'photograph'
  42. } }, chooseImageProps), chooseVideoProps),
  43. data: {
  44. lists: [],
  45. isInCount: true
  46. },
  47. methods: {
  48. formatFileList() {
  49. const { fileList = [], maxCount } = this.data;
  50. const lists = fileList.map(item => (Object.assign(Object.assign({}, item), { isImage: typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage })));
  51. this.setData({ lists, isInCount: lists.length < maxCount });
  52. },
  53. getDetail(index) {
  54. return {
  55. name: this.data.name,
  56. index: index == null ? this.data.fileList.length : index
  57. };
  58. },
  59. startUpload() {
  60. const { maxCount, multiple, accept, lists, disabled } = this.data;
  61. if (disabled)
  62. return;
  63. chooseFile(Object.assign(Object.assign({}, this.data), { maxCount: maxCount - lists.length }))
  64. .then(res => {
  65. let file = null;
  66. if (isVideo(res, accept)) {
  67. file = Object.assign({ path: res.tempFilePath }, res);
  68. }
  69. else {
  70. file = multiple ? res.tempFiles : res.tempFiles[0];
  71. }
  72. this.onBeforeRead(file);
  73. })
  74. .catch(error => {
  75. this.$emit('error', error);
  76. });
  77. },
  78. onBeforeRead(file) {
  79. const { beforeRead, useBeforeRead } = this.data;
  80. let res = true;
  81. if (typeof beforeRead === 'function') {
  82. res = beforeRead(file, this.getDetail());
  83. }
  84. if (useBeforeRead) {
  85. res = new Promise((resolve, reject) => {
  86. this.$emit('before-read', Object.assign(Object.assign({ file }, this.getDetail()), { callback: (ok) => {
  87. ok ? resolve() : reject();
  88. } }));
  89. });
  90. }
  91. if (!res) {
  92. return;
  93. }
  94. if (isPromise(res)) {
  95. res.then((data) => this.onAfterRead(data || file));
  96. }
  97. else {
  98. this.onAfterRead(file);
  99. }
  100. },
  101. onAfterRead(file) {
  102. const { maxSize } = this.data;
  103. const oversize = Array.isArray(file)
  104. ? file.some(item => item.size > maxSize)
  105. : file.size > maxSize;
  106. if (oversize) {
  107. this.$emit('oversize', Object.assign({ file }, this.getDetail()));
  108. return;
  109. }
  110. if (typeof this.data.afterRead === 'function') {
  111. this.data.afterRead(file, this.getDetail());
  112. }
  113. this.$emit('after-read', Object.assign({ file }, this.getDetail()));
  114. },
  115. deleteItem(event) {
  116. const { index } = event.currentTarget.dataset;
  117. this.$emit('delete', Object.assign(Object.assign({}, this.getDetail(index)), { file: this.data.fileList[index] }));
  118. },
  119. onPreviewImage(event) {
  120. const { index } = event.currentTarget.dataset;
  121. const { lists } = this.data;
  122. const item = lists[index];
  123. this.$emit('click-preview', Object.assign({ url: item.url || item.path }, this.getDetail(index)));
  124. if (!this.data.previewFullImage)
  125. return;
  126. wx.previewImage({
  127. urls: lists
  128. .filter(item => item.isImage)
  129. .map(item => item.url || item.path),
  130. current: item.url || item.path,
  131. fail() {
  132. wx.showToast({ title: '预览图片失败', icon: 'none' });
  133. }
  134. });
  135. }
  136. }
  137. });