index.js 6.1 KB

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