SkuImgUploader.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Utils
  2. import { createNamespace } from '../../utils'; // Components
  3. import Uploader from '../../uploader';
  4. var namespace = createNamespace('sku-img-uploader');
  5. var createComponent = namespace[0];
  6. var t = namespace[2];
  7. export default createComponent({
  8. props: {
  9. value: String,
  10. uploadImg: Function,
  11. customUpload: Function,
  12. maxSize: {
  13. type: Number,
  14. default: 6
  15. }
  16. },
  17. data: function data() {
  18. return {
  19. fileList: []
  20. };
  21. },
  22. watch: {
  23. value: function value(val) {
  24. if (val) {
  25. this.fileList = [{
  26. url: val,
  27. isImage: true
  28. }];
  29. } else {
  30. this.fileList = [];
  31. }
  32. }
  33. },
  34. methods: {
  35. afterReadFile: function afterReadFile(file) {
  36. var _this = this;
  37. file.status = 'uploading';
  38. file.message = t('uploading');
  39. this.uploadImg(file.file, file.content).then(function (img) {
  40. file.status = 'done';
  41. _this.$emit('input', img);
  42. }).catch(function () {
  43. file.status = 'failed';
  44. file.message = t('fail');
  45. });
  46. },
  47. onOversize: function onOversize() {
  48. this.$toast(t('oversize', this.maxSize));
  49. },
  50. onDelete: function onDelete() {
  51. this.$emit('input', '');
  52. },
  53. onClickUpload: function onClickUpload() {
  54. var _this2 = this;
  55. if (this.customUpload) {
  56. this.customUpload().then(function (url) {
  57. _this2.fileList.push({
  58. url: url
  59. });
  60. _this2.$emit('input', url);
  61. });
  62. }
  63. }
  64. },
  65. render: function render() {
  66. var _this3 = this;
  67. var h = arguments[0];
  68. return h(Uploader, {
  69. "attrs": {
  70. "maxCount": 1,
  71. "readonly": !!this.customUpload,
  72. "maxSize": this.maxSize * 1024 * 1024,
  73. "afterRead": this.afterReadFile
  74. },
  75. "on": {
  76. "oversize": this.onOversize,
  77. "delete": this.onDelete,
  78. "click-upload": this.onClickUpload
  79. },
  80. "model": {
  81. value: _this3.fileList,
  82. callback: function callback($$v) {
  83. _this3.fileList = $$v;
  84. }
  85. }
  86. });
  87. }
  88. });