index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. // Utils
  3. import { createNamespace, addUnit, noop, isPromise, isDef } from '../utils';
  4. import { toArray, readFile as _readFile, isOversize, isImageFile } from './utils'; // Mixins
  5. import { FieldMixin } from '../mixins/field'; // Components
  6. import Icon from '../icon';
  7. import Image from '../image';
  8. import Loading from '../loading';
  9. import ImagePreview from '../image-preview';
  10. var _createNamespace = createNamespace('uploader'),
  11. createComponent = _createNamespace[0],
  12. bem = _createNamespace[1];
  13. export default createComponent({
  14. inheritAttrs: false,
  15. mixins: [FieldMixin],
  16. model: {
  17. prop: 'fileList'
  18. },
  19. props: {
  20. disabled: Boolean,
  21. lazyLoad: Boolean,
  22. uploadText: String,
  23. afterRead: Function,
  24. beforeRead: Function,
  25. beforeDelete: Function,
  26. previewSize: [Number, String],
  27. previewOptions: Object,
  28. name: {
  29. type: [Number, String],
  30. default: ''
  31. },
  32. accept: {
  33. type: String,
  34. default: 'image/*'
  35. },
  36. fileList: {
  37. type: Array,
  38. default: function _default() {
  39. return [];
  40. }
  41. },
  42. maxSize: {
  43. type: [Number, String],
  44. default: Number.MAX_VALUE
  45. },
  46. maxCount: {
  47. type: [Number, String],
  48. default: Number.MAX_VALUE
  49. },
  50. deletable: {
  51. type: Boolean,
  52. default: true
  53. },
  54. showUpload: {
  55. type: Boolean,
  56. default: true
  57. },
  58. previewImage: {
  59. type: Boolean,
  60. default: true
  61. },
  62. previewFullImage: {
  63. type: Boolean,
  64. default: true
  65. },
  66. imageFit: {
  67. type: String,
  68. default: 'cover'
  69. },
  70. resultType: {
  71. type: String,
  72. default: 'dataUrl'
  73. },
  74. uploadIcon: {
  75. type: String,
  76. default: 'photograph'
  77. }
  78. },
  79. computed: {
  80. previewSizeWithUnit: function previewSizeWithUnit() {
  81. return addUnit(this.previewSize);
  82. },
  83. // for form
  84. value: function value() {
  85. return this.fileList;
  86. }
  87. },
  88. methods: {
  89. getDetail: function getDetail(index) {
  90. if (index === void 0) {
  91. index = this.fileList.length;
  92. }
  93. return {
  94. name: this.name,
  95. index: index
  96. };
  97. },
  98. onChange: function onChange(event) {
  99. var _this = this;
  100. var files = event.target.files;
  101. if (this.disabled || !files.length) {
  102. return;
  103. }
  104. files = files.length === 1 ? files[0] : [].slice.call(files);
  105. if (this.beforeRead) {
  106. var response = this.beforeRead(files, this.getDetail());
  107. if (!response) {
  108. this.resetInput();
  109. return;
  110. }
  111. if (isPromise(response)) {
  112. response.then(function (data) {
  113. if (data) {
  114. _this.readFile(data);
  115. } else {
  116. _this.readFile(files);
  117. }
  118. }).catch(this.resetInput);
  119. return;
  120. }
  121. }
  122. this.readFile(files);
  123. },
  124. readFile: function readFile(files) {
  125. var _this2 = this;
  126. var oversize = isOversize(files, this.maxSize);
  127. if (Array.isArray(files)) {
  128. var maxCount = this.maxCount - this.fileList.length;
  129. if (files.length > maxCount) {
  130. files = files.slice(0, maxCount);
  131. }
  132. Promise.all(files.map(function (file) {
  133. return _readFile(file, _this2.resultType);
  134. })).then(function (contents) {
  135. var fileList = files.map(function (file, index) {
  136. var result = {
  137. file: file,
  138. status: '',
  139. message: ''
  140. };
  141. if (contents[index]) {
  142. result.content = contents[index];
  143. }
  144. return result;
  145. });
  146. _this2.onAfterRead(fileList, oversize);
  147. });
  148. } else {
  149. _readFile(files, this.resultType).then(function (content) {
  150. var result = {
  151. file: files,
  152. status: '',
  153. message: ''
  154. };
  155. if (content) {
  156. result.content = content;
  157. }
  158. _this2.onAfterRead(result, oversize);
  159. });
  160. }
  161. },
  162. onAfterRead: function onAfterRead(files, oversize) {
  163. var _this3 = this;
  164. this.resetInput();
  165. var validFiles = files;
  166. if (oversize) {
  167. var oversizeFiles = files;
  168. if (Array.isArray(files)) {
  169. oversizeFiles = [];
  170. validFiles = [];
  171. files.forEach(function (item) {
  172. if (item.file) {
  173. if (item.file.size > _this3.maxSize) {
  174. oversizeFiles.push(item);
  175. } else {
  176. validFiles.push(item);
  177. }
  178. }
  179. });
  180. } else {
  181. validFiles = null;
  182. }
  183. this.$emit('oversize', oversizeFiles, this.getDetail());
  184. }
  185. var isValidFiles = Array.isArray(validFiles) ? Boolean(validFiles.length) : Boolean(validFiles);
  186. if (isValidFiles) {
  187. this.$emit('input', [].concat(this.fileList, toArray(validFiles)));
  188. if (this.afterRead) {
  189. this.afterRead(validFiles, this.getDetail());
  190. }
  191. }
  192. },
  193. onDelete: function onDelete(file, index) {
  194. var _file$beforeDelete,
  195. _this4 = this;
  196. var beforeDelete = (_file$beforeDelete = file.beforeDelete) != null ? _file$beforeDelete : this.beforeDelete;
  197. if (beforeDelete) {
  198. var response = beforeDelete(file, this.getDetail(index));
  199. if (!response) {
  200. return;
  201. }
  202. if (isPromise(response)) {
  203. response.then(function () {
  204. _this4.deleteFile(file, index);
  205. }).catch(noop);
  206. return;
  207. }
  208. }
  209. this.deleteFile(file, index);
  210. },
  211. deleteFile: function deleteFile(file, index) {
  212. var fileList = this.fileList.slice(0);
  213. fileList.splice(index, 1);
  214. this.$emit('input', fileList);
  215. this.$emit('delete', file, this.getDetail(index));
  216. },
  217. resetInput: function resetInput() {
  218. /* istanbul ignore else */
  219. if (this.$refs.input) {
  220. this.$refs.input.value = '';
  221. }
  222. },
  223. onPreviewImage: function onPreviewImage(item) {
  224. var _this5 = this;
  225. if (!this.previewFullImage) {
  226. return;
  227. }
  228. var imageFiles = this.fileList.filter(function (item) {
  229. return isImageFile(item);
  230. });
  231. var imageContents = imageFiles.map(function (item) {
  232. return item.content || item.url;
  233. });
  234. this.imagePreview = ImagePreview(_extends({
  235. images: imageContents,
  236. startPosition: imageFiles.indexOf(item),
  237. onClose: function onClose() {
  238. _this5.$emit('close-preview');
  239. }
  240. }, this.previewOptions));
  241. },
  242. // @exposed-api
  243. closeImagePreview: function closeImagePreview() {
  244. if (this.imagePreview) {
  245. this.imagePreview.close();
  246. }
  247. },
  248. // @exposed-api
  249. chooseFile: function chooseFile() {
  250. if (this.disabled) {
  251. return;
  252. }
  253. /* istanbul ignore else */
  254. if (this.$refs.input) {
  255. this.$refs.input.click();
  256. }
  257. },
  258. genPreviewMask: function genPreviewMask(item) {
  259. var h = this.$createElement;
  260. var status = item.status,
  261. message = item.message;
  262. if (status === 'uploading' || status === 'failed') {
  263. var MaskIcon = status === 'failed' ? h(Icon, {
  264. "attrs": {
  265. "name": "close"
  266. },
  267. "class": bem('mask-icon')
  268. }) : h(Loading, {
  269. "class": bem('loading')
  270. });
  271. var showMessage = isDef(message) && message !== '';
  272. return h("div", {
  273. "class": bem('mask')
  274. }, [MaskIcon, showMessage && h("div", {
  275. "class": bem('mask-message')
  276. }, [message])]);
  277. }
  278. },
  279. genPreviewItem: function genPreviewItem(item, index) {
  280. var _item$deletable,
  281. _this6 = this,
  282. _item$previewSize,
  283. _item$imageFit;
  284. var h = this.$createElement;
  285. var deleteAble = (_item$deletable = item.deletable) != null ? _item$deletable : this.deletable;
  286. var showDelete = item.status !== 'uploading' && deleteAble;
  287. var DeleteIcon = showDelete && h("div", {
  288. "class": bem('preview-delete'),
  289. "on": {
  290. "click": function click(event) {
  291. event.stopPropagation();
  292. _this6.onDelete(item, index);
  293. }
  294. }
  295. }, [h(Icon, {
  296. "attrs": {
  297. "name": "cross"
  298. },
  299. "class": bem('preview-delete-icon')
  300. })]);
  301. var PreviewCoverContent = this.slots('preview-cover', _extends({
  302. index: index
  303. }, item));
  304. var PreviewCover = PreviewCoverContent && h("div", {
  305. "class": bem('preview-cover')
  306. }, [PreviewCoverContent]);
  307. var previewSize = (_item$previewSize = item.previewSize) != null ? _item$previewSize : this.previewSize;
  308. var imageFit = (_item$imageFit = item.imageFit) != null ? _item$imageFit : this.imageFit;
  309. var Preview = isImageFile(item) ? h(Image, {
  310. "attrs": {
  311. "fit": imageFit,
  312. "src": item.content || item.url,
  313. "width": previewSize,
  314. "height": previewSize,
  315. "lazyLoad": this.lazyLoad
  316. },
  317. "class": bem('preview-image'),
  318. "on": {
  319. "click": function click() {
  320. _this6.onPreviewImage(item);
  321. }
  322. }
  323. }, [PreviewCover]) : h("div", {
  324. "class": bem('file'),
  325. "style": {
  326. width: this.previewSizeWithUnit,
  327. height: this.previewSizeWithUnit
  328. }
  329. }, [h(Icon, {
  330. "class": bem('file-icon'),
  331. "attrs": {
  332. "name": "description"
  333. }
  334. }), h("div", {
  335. "class": [bem('file-name'), 'van-ellipsis']
  336. }, [item.file ? item.file.name : item.url]), PreviewCover]);
  337. return h("div", {
  338. "class": bem('preview'),
  339. "on": {
  340. "click": function click() {
  341. _this6.$emit('click-preview', item, _this6.getDetail(index));
  342. }
  343. }
  344. }, [Preview, this.genPreviewMask(item), DeleteIcon]);
  345. },
  346. genPreviewList: function genPreviewList() {
  347. if (this.previewImage) {
  348. return this.fileList.map(this.genPreviewItem);
  349. }
  350. },
  351. genUpload: function genUpload() {
  352. var h = this.$createElement;
  353. if (this.fileList.length >= this.maxCount || !this.showUpload) {
  354. return;
  355. }
  356. var slot = this.slots();
  357. var Input = h("input", {
  358. "attrs": _extends({}, this.$attrs, {
  359. "type": "file",
  360. "accept": this.accept,
  361. "disabled": this.disabled
  362. }),
  363. "ref": "input",
  364. "class": bem('input'),
  365. "on": {
  366. "change": this.onChange
  367. }
  368. });
  369. if (slot) {
  370. return h("div", {
  371. "class": bem('input-wrapper'),
  372. "key": "input-wrapper"
  373. }, [slot, Input]);
  374. }
  375. var style;
  376. if (this.previewSize) {
  377. var size = this.previewSizeWithUnit;
  378. style = {
  379. width: size,
  380. height: size
  381. };
  382. }
  383. return h("div", {
  384. "class": bem('upload'),
  385. "style": style
  386. }, [h(Icon, {
  387. "attrs": {
  388. "name": this.uploadIcon
  389. },
  390. "class": bem('upload-icon')
  391. }), this.uploadText && h("span", {
  392. "class": bem('upload-text')
  393. }, [this.uploadText]), Input]);
  394. }
  395. },
  396. render: function render() {
  397. var h = arguments[0];
  398. return h("div", {
  399. "class": bem()
  400. }, [h("div", {
  401. "class": bem('wrapper', {
  402. disabled: this.disabled
  403. })
  404. }, [this.genPreviewList(), this.genUpload()])]);
  405. }
  406. });