upload.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/ // The require function
  6. /******/ function __webpack_require__(moduleId) {
  7. /******/ // Check if module is in cache
  8. /******/ if(installedModules[moduleId])
  9. /******/ return installedModules[moduleId].exports;
  10. /******/ // Create a new module (and put it into the cache)
  11. /******/ var module = installedModules[moduleId] = {
  12. /******/ exports: {},
  13. /******/ id: moduleId,
  14. /******/ loaded: false
  15. /******/ };
  16. /******/ // Execute the module function
  17. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  18. /******/ // Flag the module as loaded
  19. /******/ module.loaded = true;
  20. /******/ // Return the exports of the module
  21. /******/ return module.exports;
  22. /******/ }
  23. /******/ // expose the modules object (__webpack_modules__)
  24. /******/ __webpack_require__.m = modules;
  25. /******/ // expose the module cache
  26. /******/ __webpack_require__.c = installedModules;
  27. /******/ // __webpack_public_path__
  28. /******/ __webpack_require__.p = "/dist/";
  29. /******/ // Load entry module and return exports
  30. /******/ return __webpack_require__(0);
  31. /******/ })
  32. /************************************************************************/
  33. /******/ ({
  34. /***/ 0:
  35. /***/ function(module, exports, __webpack_require__) {
  36. module.exports = __webpack_require__(352);
  37. /***/ },
  38. /***/ 3:
  39. /***/ function(module, exports) {
  40. module.exports = function normalizeComponent (
  41. rawScriptExports,
  42. compiledTemplate,
  43. scopeId,
  44. cssModules
  45. ) {
  46. var esModule
  47. var scriptExports = rawScriptExports = rawScriptExports || {}
  48. // ES6 modules interop
  49. var type = typeof rawScriptExports.default
  50. if (type === 'object' || type === 'function') {
  51. esModule = rawScriptExports
  52. scriptExports = rawScriptExports.default
  53. }
  54. // Vue.extend constructor export interop
  55. var options = typeof scriptExports === 'function'
  56. ? scriptExports.options
  57. : scriptExports
  58. // render functions
  59. if (compiledTemplate) {
  60. options.render = compiledTemplate.render
  61. options.staticRenderFns = compiledTemplate.staticRenderFns
  62. }
  63. // scopedId
  64. if (scopeId) {
  65. options._scopeId = scopeId
  66. }
  67. // inject cssModules
  68. if (cssModules) {
  69. var computed = options.computed || (options.computed = {})
  70. Object.keys(cssModules).forEach(function (key) {
  71. var module = cssModules[key]
  72. computed[key] = function () { return module }
  73. })
  74. }
  75. return {
  76. esModule: esModule,
  77. exports: scriptExports,
  78. options: options
  79. }
  80. }
  81. /***/ },
  82. /***/ 60:
  83. /***/ function(module, exports) {
  84. module.exports = require("element-ui/lib/mixins/locale");
  85. /***/ },
  86. /***/ 352:
  87. /***/ function(module, exports, __webpack_require__) {
  88. 'use strict';
  89. exports.__esModule = true;
  90. var _src = __webpack_require__(353);
  91. var _src2 = _interopRequireDefault(_src);
  92. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  93. /* istanbul ignore next */
  94. _src2.default.install = function (Vue) {
  95. Vue.component(_src2.default.name, _src2.default);
  96. };
  97. exports.default = _src2.default;
  98. /***/ },
  99. /***/ 353:
  100. /***/ function(module, exports, __webpack_require__) {
  101. var Component = __webpack_require__(3)(
  102. /* script */
  103. __webpack_require__(354),
  104. /* template */
  105. null,
  106. /* scopeId */
  107. null,
  108. /* cssModules */
  109. null
  110. )
  111. module.exports = Component.exports
  112. /***/ },
  113. /***/ 354:
  114. /***/ function(module, exports, __webpack_require__) {
  115. 'use strict';
  116. exports.__esModule = true;
  117. var _uploadList = __webpack_require__(355);
  118. var _uploadList2 = _interopRequireDefault(_uploadList);
  119. var _upload = __webpack_require__(359);
  120. var _upload2 = _interopRequireDefault(_upload);
  121. var _iframeUpload = __webpack_require__(365);
  122. var _iframeUpload2 = _interopRequireDefault(_iframeUpload);
  123. var _progress = __webpack_require__(357);
  124. var _progress2 = _interopRequireDefault(_progress);
  125. var _migrating = __webpack_require__(367);
  126. var _migrating2 = _interopRequireDefault(_migrating);
  127. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  128. function noop() {}
  129. exports.default = {
  130. name: 'ElUpload',
  131. mixins: [_migrating2.default],
  132. components: {
  133. ElProgress: _progress2.default,
  134. UploadList: _uploadList2.default,
  135. Upload: _upload2.default,
  136. IframeUpload: _iframeUpload2.default
  137. },
  138. props: {
  139. action: {
  140. type: String,
  141. required: true
  142. },
  143. headers: {
  144. type: Object,
  145. default: function _default() {
  146. return {};
  147. }
  148. },
  149. data: Object,
  150. multiple: Boolean,
  151. name: {
  152. type: String,
  153. default: 'file'
  154. },
  155. drag: Boolean,
  156. dragger: Boolean,
  157. withCredentials: Boolean,
  158. showFileList: {
  159. type: Boolean,
  160. default: true
  161. },
  162. accept: String,
  163. type: {
  164. type: String,
  165. default: 'select'
  166. },
  167. beforeUpload: Function,
  168. onRemove: {
  169. type: Function,
  170. default: noop
  171. },
  172. onChange: {
  173. type: Function,
  174. default: noop
  175. },
  176. onPreview: {
  177. type: Function
  178. },
  179. onSuccess: {
  180. type: Function,
  181. default: noop
  182. },
  183. onProgress: {
  184. type: Function,
  185. default: noop
  186. },
  187. onError: {
  188. type: Function,
  189. default: noop
  190. },
  191. fileList: {
  192. type: Array,
  193. default: function _default() {
  194. return [];
  195. }
  196. },
  197. autoUpload: {
  198. type: Boolean,
  199. default: true
  200. },
  201. listType: {
  202. type: String,
  203. default: 'text' // text,picture,picture-card
  204. },
  205. httpRequest: Function
  206. },
  207. data: function data() {
  208. return {
  209. uploadFiles: [],
  210. dragOver: false,
  211. draging: false,
  212. tempIndex: 1
  213. };
  214. },
  215. watch: {
  216. fileList: {
  217. immediate: true,
  218. handler: function handler(fileList) {
  219. var _this = this;
  220. this.uploadFiles = fileList.map(function (item) {
  221. item.uid = item.uid || Date.now() + _this.tempIndex++;
  222. item.status = 'success';
  223. return item;
  224. });
  225. }
  226. }
  227. },
  228. methods: {
  229. handleStart: function handleStart(rawFile) {
  230. rawFile.uid = Date.now() + this.tempIndex++;
  231. var file = {
  232. status: 'ready',
  233. name: rawFile.name,
  234. size: rawFile.size,
  235. percentage: 0,
  236. uid: rawFile.uid,
  237. raw: rawFile
  238. };
  239. try {
  240. file.url = URL.createObjectURL(rawFile);
  241. } catch (err) {
  242. console.error(err);
  243. return;
  244. }
  245. this.uploadFiles.push(file);
  246. },
  247. handleProgress: function handleProgress(ev, rawFile) {
  248. var file = this.getFile(rawFile);
  249. this.onProgress(ev, file, this.uploadFiles);
  250. file.status = 'uploading';
  251. file.percentage = ev.percent || 0;
  252. },
  253. handleSuccess: function handleSuccess(res, rawFile) {
  254. var file = this.getFile(rawFile);
  255. if (file) {
  256. file.status = 'success';
  257. file.response = res;
  258. this.onSuccess(res, file, this.uploadFiles);
  259. this.onChange(file, this.uploadFiles);
  260. }
  261. },
  262. handleError: function handleError(err, rawFile) {
  263. var file = this.getFile(rawFile);
  264. var fileList = this.uploadFiles;
  265. file.status = 'fail';
  266. fileList.splice(fileList.indexOf(file), 1);
  267. this.onError(err, file, this.uploadFiles);
  268. this.onChange(file, this.uploadFiles);
  269. },
  270. handleRemove: function handleRemove(file, raw) {
  271. if (raw) {
  272. file = this.getFile(raw);
  273. }
  274. var fileList = this.uploadFiles;
  275. fileList.splice(fileList.indexOf(file), 1);
  276. this.onRemove(file, fileList);
  277. },
  278. getFile: function getFile(rawFile) {
  279. var fileList = this.uploadFiles;
  280. var target;
  281. fileList.every(function (item) {
  282. target = rawFile.uid === item.uid ? item : null;
  283. return !target;
  284. });
  285. return target;
  286. },
  287. clearFiles: function clearFiles() {
  288. this.uploadFiles = [];
  289. },
  290. submit: function submit() {
  291. var _this2 = this;
  292. this.uploadFiles.filter(function (file) {
  293. return file.status === 'ready';
  294. }).forEach(function (file) {
  295. _this2.$refs['upload-inner'].upload(file.raw);
  296. });
  297. },
  298. getMigratingConfig: function getMigratingConfig() {
  299. return {
  300. props: {
  301. 'default-file-list': 'default-file-list is renamed to file-list.',
  302. 'show-upload-list': 'show-upload-list is renamed to show-file-list.',
  303. 'thumbnail-mode': 'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan'
  304. }
  305. };
  306. }
  307. },
  308. render: function render(h) {
  309. var uploadList;
  310. if (this.showFileList) {
  311. uploadList = h(
  312. _uploadList2.default,
  313. {
  314. attrs: {
  315. listType: this.listType,
  316. files: this.uploadFiles,
  317. handlePreview: this.onPreview },
  318. on: {
  319. 'remove': this.handleRemove
  320. }
  321. },
  322. []
  323. );
  324. }
  325. var uploadData = {
  326. props: {
  327. type: this.type,
  328. drag: this.drag,
  329. action: this.action,
  330. multiple: this.multiple,
  331. 'before-upload': this.beforeUpload,
  332. 'with-credentials': this.withCredentials,
  333. headers: this.headers,
  334. name: this.name,
  335. data: this.data,
  336. accept: this.accept,
  337. fileList: this.uploadFiles,
  338. autoUpload: this.autoUpload,
  339. listType: this.listType,
  340. 'on-start': this.handleStart,
  341. 'on-progress': this.handleProgress,
  342. 'on-success': this.handleSuccess,
  343. 'on-error': this.handleError,
  344. 'on-preview': this.onPreview,
  345. 'on-remove': this.handleRemove,
  346. 'http-request': this.httpRequest
  347. },
  348. ref: 'upload-inner'
  349. };
  350. var trigger = this.$slots.trigger || this.$slots.default;
  351. var uploadComponent = typeof FormData !== 'undefined' || this.$isServer ? h(
  352. 'upload',
  353. uploadData,
  354. [trigger]
  355. ) : h(
  356. 'iframeUpload',
  357. uploadData,
  358. [trigger]
  359. );
  360. return h(
  361. 'div',
  362. null,
  363. [this.listType === 'picture-card' ? uploadList : '', this.$slots.trigger ? [uploadComponent, this.$slots.default] : uploadComponent, this.$slots.tip, this.listType !== 'picture-card' ? uploadList : '']
  364. );
  365. }
  366. };
  367. /***/ },
  368. /***/ 355:
  369. /***/ function(module, exports, __webpack_require__) {
  370. var Component = __webpack_require__(3)(
  371. /* script */
  372. __webpack_require__(356),
  373. /* template */
  374. __webpack_require__(358),
  375. /* scopeId */
  376. null,
  377. /* cssModules */
  378. null
  379. )
  380. module.exports = Component.exports
  381. /***/ },
  382. /***/ 356:
  383. /***/ function(module, exports, __webpack_require__) {
  384. 'use strict';
  385. exports.__esModule = true;
  386. var _locale = __webpack_require__(60);
  387. var _locale2 = _interopRequireDefault(_locale);
  388. var _progress = __webpack_require__(357);
  389. var _progress2 = _interopRequireDefault(_progress);
  390. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  391. //
  392. //
  393. //
  394. //
  395. //
  396. //
  397. //
  398. //
  399. //
  400. //
  401. //
  402. //
  403. //
  404. //
  405. //
  406. //
  407. //
  408. //
  409. //
  410. //
  411. //
  412. //
  413. //
  414. //
  415. //
  416. //
  417. //
  418. //
  419. //
  420. //
  421. //
  422. //
  423. //
  424. //
  425. //
  426. //
  427. //
  428. //
  429. //
  430. //
  431. //
  432. //
  433. //
  434. //
  435. //
  436. //
  437. //
  438. //
  439. //
  440. //
  441. //
  442. //
  443. //
  444. //
  445. //
  446. //
  447. //
  448. //
  449. exports.default = {
  450. mixins: [_locale2.default],
  451. components: { ElProgress: _progress2.default },
  452. props: {
  453. files: {
  454. type: Array,
  455. default: function _default() {
  456. return [];
  457. }
  458. },
  459. handlePreview: Function,
  460. listType: String
  461. },
  462. methods: {
  463. parsePercentage: function parsePercentage(val) {
  464. return parseInt(val, 10);
  465. },
  466. handleClick: function handleClick(file) {
  467. this.handlePreview && this.handlePreview(file);
  468. }
  469. }
  470. };
  471. /***/ },
  472. /***/ 357:
  473. /***/ function(module, exports) {
  474. module.exports = require("element-ui/lib/progress");
  475. /***/ },
  476. /***/ 358:
  477. /***/ function(module, exports) {
  478. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  479. return _c('transition-group', {
  480. class: ['el-upload-list', 'el-upload-list--' + _vm.listType],
  481. attrs: {
  482. "tag": "ul",
  483. "name": "list"
  484. }
  485. }, _vm._l((_vm.files), function(file) {
  486. return _c('li', {
  487. key: file,
  488. class: ['el-upload-list__item', 'is-' + file.status]
  489. }, [(['picture-card', 'picture'].indexOf(_vm.listType) > -1 && file.status === 'success') ? _c('img', {
  490. staticClass: "el-upload-list__item-thumbnail",
  491. attrs: {
  492. "src": file.url,
  493. "alt": ""
  494. }
  495. }) : _vm._e(), _c('a', {
  496. staticClass: "el-upload-list__item-name",
  497. on: {
  498. "click": function($event) {
  499. _vm.handleClick(file)
  500. }
  501. }
  502. }, [_c('i', {
  503. staticClass: "el-icon-document"
  504. }), _vm._v(_vm._s(file.name) + "\n ")]), _c('label', {
  505. directives: [{
  506. name: "show",
  507. rawName: "v-show",
  508. value: (file.status === 'success'),
  509. expression: "file.status === 'success'"
  510. }],
  511. staticClass: "el-upload-list__item-status-label"
  512. }, [_c('i', {
  513. class: {
  514. 'el-icon-circle-check': _vm.listType === 'text',
  515. 'el-icon-check': ['picture-card', 'picture'].indexOf(_vm.listType) > -1
  516. }
  517. }), _c('i', {
  518. staticClass: "el-icon-close",
  519. on: {
  520. "click": function($event) {
  521. _vm.$emit('remove', file)
  522. }
  523. }
  524. })]), (
  525. _vm.listType === 'picture-card' &&
  526. file.status === 'success'
  527. ) ? _c('span', {
  528. staticClass: "el-upload-list__item-actions"
  529. }, [(
  530. _vm.handlePreview &&
  531. _vm.listType === 'picture-card'
  532. ) ? _c('span', {
  533. staticClass: "el-upload-list__item-preview",
  534. on: {
  535. "click": function($event) {
  536. _vm.handlePreview(file)
  537. }
  538. }
  539. }, [_c('i', {
  540. staticClass: "el-icon-view"
  541. })]) : _vm._e(), _c('span', {
  542. staticClass: "el-upload-list__item-delete",
  543. on: {
  544. "click": function($event) {
  545. _vm.$emit('remove', file)
  546. }
  547. }
  548. }, [_c('i', {
  549. staticClass: "el-icon-delete2"
  550. })])]) : _vm._e(), (file.status === 'uploading') ? _c('el-progress', {
  551. attrs: {
  552. "type": _vm.listType === 'picture-card' ? 'circle' : 'line',
  553. "stroke-width": _vm.listType === 'picture-card' ? 6 : 2,
  554. "percentage": _vm.parsePercentage(file.percentage)
  555. }
  556. }) : _vm._e()], 1)
  557. }))
  558. },staticRenderFns: []}
  559. /***/ },
  560. /***/ 359:
  561. /***/ function(module, exports, __webpack_require__) {
  562. var Component = __webpack_require__(3)(
  563. /* script */
  564. __webpack_require__(360),
  565. /* template */
  566. null,
  567. /* scopeId */
  568. null,
  569. /* cssModules */
  570. null
  571. )
  572. module.exports = Component.exports
  573. /***/ },
  574. /***/ 360:
  575. /***/ function(module, exports, __webpack_require__) {
  576. 'use strict';
  577. exports.__esModule = true;
  578. var _ajax = __webpack_require__(361);
  579. var _ajax2 = _interopRequireDefault(_ajax);
  580. var _uploadDragger = __webpack_require__(362);
  581. var _uploadDragger2 = _interopRequireDefault(_uploadDragger);
  582. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  583. exports.default = {
  584. components: {
  585. UploadDragger: _uploadDragger2.default
  586. },
  587. props: {
  588. type: String,
  589. action: {
  590. type: String,
  591. required: true
  592. },
  593. name: {
  594. type: String,
  595. default: 'file'
  596. },
  597. data: Object,
  598. headers: Object,
  599. withCredentials: Boolean,
  600. multiple: Boolean,
  601. accept: String,
  602. onStart: Function,
  603. onProgress: Function,
  604. onSuccess: Function,
  605. onError: Function,
  606. beforeUpload: Function,
  607. drag: Boolean,
  608. onPreview: {
  609. type: Function,
  610. default: function _default() {}
  611. },
  612. onRemove: {
  613. type: Function,
  614. default: function _default() {}
  615. },
  616. fileList: Array,
  617. autoUpload: Boolean,
  618. listType: String,
  619. httpRequest: {
  620. type: Function,
  621. default: _ajax2.default
  622. }
  623. },
  624. data: function data() {
  625. return {
  626. mouseover: false
  627. };
  628. },
  629. methods: {
  630. isImage: function isImage(str) {
  631. return str.indexOf('image') !== -1;
  632. },
  633. handleChange: function handleChange(ev) {
  634. var files = ev.target.files;
  635. if (!files) return;
  636. this.uploadFiles(files);
  637. this.$refs.input.value = null;
  638. },
  639. uploadFiles: function uploadFiles(files) {
  640. var _this = this;
  641. var postFiles = Array.prototype.slice.call(files);
  642. if (!this.multiple) {
  643. postFiles = postFiles.slice(0, 1);
  644. }
  645. if (postFiles.length === 0) {
  646. return;
  647. }
  648. postFiles.forEach(function (rawFile) {
  649. _this.onStart(rawFile);
  650. if (_this.autoUpload) _this.upload(rawFile);
  651. });
  652. },
  653. upload: function upload(rawFile, file) {
  654. var _this2 = this;
  655. if (!this.beforeUpload) {
  656. return this.post(rawFile);
  657. }
  658. var before = this.beforeUpload(rawFile);
  659. if (before && before.then) {
  660. before.then(function (processedFile) {
  661. if (Object.prototype.toString.call(processedFile) === '[object File]') {
  662. _this2.post(processedFile);
  663. } else {
  664. _this2.post(rawFile);
  665. }
  666. }, function () {
  667. _this2.onRemove(rawFile, true);
  668. });
  669. } else if (before !== false) {
  670. this.post(rawFile);
  671. } else {
  672. this.onRemove(rawFile, true);
  673. }
  674. },
  675. post: function post(rawFile) {
  676. var _this3 = this;
  677. var options = {
  678. headers: this.headers,
  679. withCredentials: this.withCredentials,
  680. file: rawFile,
  681. data: this.data,
  682. filename: this.name,
  683. action: this.action,
  684. onProgress: function onProgress(e) {
  685. _this3.onProgress(e, rawFile);
  686. },
  687. onSuccess: function onSuccess(res) {
  688. _this3.onSuccess(res, rawFile);
  689. },
  690. onError: function onError(err) {
  691. _this3.onError(err, rawFile);
  692. }
  693. };
  694. var requestPromise = this.httpRequest(options);
  695. if (requestPromise && requestPromise.then) {
  696. requestPromise.then(options.onSuccess, options.onError);
  697. }
  698. },
  699. handleClick: function handleClick() {
  700. this.$refs.input.click();
  701. }
  702. },
  703. render: function render(h) {
  704. var handleClick = this.handleClick,
  705. drag = this.drag,
  706. handleChange = this.handleChange,
  707. multiple = this.multiple,
  708. accept = this.accept,
  709. listType = this.listType,
  710. uploadFiles = this.uploadFiles;
  711. var data = {
  712. class: {
  713. 'el-upload': true
  714. },
  715. on: {
  716. click: handleClick
  717. }
  718. };
  719. data.class['el-upload--' + listType] = true;
  720. return h(
  721. 'div',
  722. data,
  723. [drag ? h(
  724. 'upload-dragger',
  725. {
  726. on: {
  727. 'file': uploadFiles
  728. }
  729. },
  730. [this.$slots.default]
  731. ) : this.$slots.default, h(
  732. 'input',
  733. { 'class': 'el-upload__input', attrs: { type: 'file', multiple: multiple, accept: accept },
  734. ref: 'input', on: {
  735. 'change': handleChange
  736. }
  737. },
  738. []
  739. )]
  740. );
  741. }
  742. };
  743. /***/ },
  744. /***/ 361:
  745. /***/ function(module, exports) {
  746. 'use strict';
  747. exports.__esModule = true;
  748. exports.default = upload;
  749. function getError(action, option, xhr) {
  750. var msg = void 0;
  751. if (xhr.response) {
  752. msg = xhr.status + ' ' + (xhr.response.error || xhr.response);
  753. } else if (xhr.responseText) {
  754. msg = xhr.status + ' ' + xhr.responseText;
  755. } else {
  756. msg = 'fail to post ' + action + ' ' + xhr.status + '\'';
  757. }
  758. var err = new Error(msg);
  759. err.status = xhr.status;
  760. err.method = 'post';
  761. err.url = action;
  762. return err;
  763. }
  764. function getBody(xhr) {
  765. var text = xhr.responseText || xhr.response;
  766. if (!text) {
  767. return text;
  768. }
  769. try {
  770. return JSON.parse(text);
  771. } catch (e) {
  772. return text;
  773. }
  774. }
  775. function upload(option) {
  776. if (typeof XMLHttpRequest === 'undefined') {
  777. return;
  778. }
  779. var xhr = new XMLHttpRequest();
  780. var action = option.action;
  781. if (xhr.upload) {
  782. xhr.upload.onprogress = function progress(e) {
  783. if (e.total > 0) {
  784. e.percent = e.loaded / e.total * 100;
  785. }
  786. option.onProgress(e);
  787. };
  788. }
  789. var formData = new FormData();
  790. if (option.data) {
  791. Object.keys(option.data).map(function (key) {
  792. formData.append(key, option.data[key]);
  793. });
  794. }
  795. formData.append(option.filename, option.file);
  796. xhr.onerror = function error(e) {
  797. option.onError(e);
  798. };
  799. xhr.onload = function onload() {
  800. if (xhr.status < 200 || xhr.status >= 300) {
  801. return option.onError(getError(action, option, xhr));
  802. }
  803. option.onSuccess(getBody(xhr));
  804. };
  805. xhr.open('post', action, true);
  806. if (option.withCredentials && 'withCredentials' in xhr) {
  807. xhr.withCredentials = true;
  808. }
  809. var headers = option.headers || {};
  810. for (var item in headers) {
  811. if (headers.hasOwnProperty(item) && headers[item] !== null) {
  812. xhr.setRequestHeader(item, headers[item]);
  813. }
  814. }
  815. xhr.send(formData);
  816. return xhr;
  817. }
  818. /***/ },
  819. /***/ 362:
  820. /***/ function(module, exports, __webpack_require__) {
  821. var Component = __webpack_require__(3)(
  822. /* script */
  823. __webpack_require__(363),
  824. /* template */
  825. __webpack_require__(364),
  826. /* scopeId */
  827. null,
  828. /* cssModules */
  829. null
  830. )
  831. module.exports = Component.exports
  832. /***/ },
  833. /***/ 363:
  834. /***/ function(module, exports) {
  835. 'use strict';
  836. exports.__esModule = true;
  837. //
  838. //
  839. //
  840. //
  841. //
  842. //
  843. //
  844. //
  845. //
  846. //
  847. //
  848. //
  849. //
  850. exports.default = {
  851. name: 'ElUploadDrag',
  852. data: function data() {
  853. return {
  854. dragover: false
  855. };
  856. },
  857. methods: {
  858. onDrop: function onDrop(e) {
  859. this.dragover = false;
  860. this.$emit('file', e.dataTransfer.files);
  861. }
  862. }
  863. };
  864. /***/ },
  865. /***/ 364:
  866. /***/ function(module, exports) {
  867. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  868. return _c('div', {
  869. staticClass: "el-upload-dragger",
  870. class: {
  871. 'is-dragover': _vm.dragover
  872. },
  873. on: {
  874. "drop": function($event) {
  875. $event.preventDefault();
  876. _vm.onDrop($event)
  877. },
  878. "dragover": function($event) {
  879. $event.preventDefault();
  880. _vm.dragover = true
  881. },
  882. "dragleave": function($event) {
  883. $event.preventDefault();
  884. _vm.dragover = false
  885. }
  886. }
  887. }, [_vm._t("default")], 2)
  888. },staticRenderFns: []}
  889. /***/ },
  890. /***/ 365:
  891. /***/ function(module, exports, __webpack_require__) {
  892. var Component = __webpack_require__(3)(
  893. /* script */
  894. __webpack_require__(366),
  895. /* template */
  896. null,
  897. /* scopeId */
  898. null,
  899. /* cssModules */
  900. null
  901. )
  902. module.exports = Component.exports
  903. /***/ },
  904. /***/ 366:
  905. /***/ function(module, exports, __webpack_require__) {
  906. 'use strict';
  907. exports.__esModule = true;
  908. var _uploadDragger = __webpack_require__(362);
  909. var _uploadDragger2 = _interopRequireDefault(_uploadDragger);
  910. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  911. exports.default = {
  912. components: {
  913. UploadDragger: _uploadDragger2.default
  914. },
  915. props: {
  916. type: String,
  917. data: {},
  918. action: {
  919. type: String,
  920. required: true
  921. },
  922. name: {
  923. type: String,
  924. default: 'file'
  925. },
  926. withCredentials: Boolean,
  927. accept: String,
  928. onStart: Function,
  929. onProgress: Function,
  930. onSuccess: Function,
  931. onError: Function,
  932. beforeUpload: Function,
  933. onPreview: {
  934. type: Function,
  935. default: function _default() {}
  936. },
  937. onRemove: {
  938. type: Function,
  939. default: function _default() {}
  940. },
  941. drag: Boolean,
  942. listType: String
  943. },
  944. data: function data() {
  945. return {
  946. mouseover: false,
  947. domain: '',
  948. file: null,
  949. disabled: false
  950. };
  951. },
  952. methods: {
  953. isImage: function isImage(str) {
  954. return str.indexOf('image') !== -1;
  955. },
  956. handleClick: function handleClick() {
  957. this.$refs.input.click();
  958. },
  959. handleChange: function handleChange(ev) {
  960. var file = ev.target.value;
  961. if (file) {
  962. this.uploadFiles(file);
  963. }
  964. },
  965. uploadFiles: function uploadFiles(file) {
  966. if (this.disabled) return;
  967. this.disabled = true;
  968. this.file = file;
  969. this.onStart(file);
  970. var formNode = this.getFormNode();
  971. var dataSpan = this.getFormDataNode();
  972. var data = this.data;
  973. if (typeof data === 'function') {
  974. data = data(file);
  975. }
  976. var inputs = [];
  977. for (var key in data) {
  978. if (data.hasOwnProperty(key)) {
  979. inputs.push('<input name="' + key + '" value="' + data[key] + '"/>');
  980. }
  981. }
  982. dataSpan.innerHTML = inputs.join('');
  983. formNode.submit();
  984. dataSpan.innerHTML = '';
  985. },
  986. getFormNode: function getFormNode() {
  987. return this.$refs.form;
  988. },
  989. getFormDataNode: function getFormDataNode() {
  990. return this.$refs.data;
  991. }
  992. },
  993. created: function created() {
  994. this.frameName = 'frame-' + Date.now();
  995. },
  996. mounted: function mounted() {
  997. var self = this;
  998. !this.$isServer && window.addEventListener('message', function (event) {
  999. if (!self.file) return;
  1000. var targetOrigin = new URL(self.action).origin;
  1001. if (event.origin !== targetOrigin) return;
  1002. var response = event.data;
  1003. if (response.result === 'success') {
  1004. self.onSuccess(response, self.file);
  1005. } else if (response.result === 'failed') {
  1006. self.onError(response, self.file);
  1007. }
  1008. self.disabled = false;
  1009. self.file = null;
  1010. }, false);
  1011. },
  1012. render: function render(h) {
  1013. var drag = this.drag,
  1014. uploadFiles = this.uploadFiles,
  1015. listType = this.listType,
  1016. frameName = this.frameName;
  1017. var oClass = { 'el-upload': true };
  1018. oClass['el-upload--' + listType] = true;
  1019. return h(
  1020. 'div',
  1021. {
  1022. 'class': oClass,
  1023. on: {
  1024. 'click': this.handleClick
  1025. },
  1026. nativeOn: {
  1027. 'drop': this.onDrop,
  1028. 'dragover': this.handleDragover,
  1029. 'dragleave': this.handleDragleave
  1030. }
  1031. },
  1032. [h(
  1033. 'iframe',
  1034. {
  1035. on: {
  1036. 'load': this.onload
  1037. },
  1038. ref: 'iframe',
  1039. attrs: { name: frameName
  1040. }
  1041. },
  1042. []
  1043. ), h(
  1044. 'form',
  1045. { ref: 'form', attrs: { action: this.action, target: frameName, enctype: 'multipart/form-data', method: 'POST' }
  1046. },
  1047. [h(
  1048. 'input',
  1049. {
  1050. 'class': 'el-upload__input',
  1051. attrs: { type: 'file',
  1052. name: 'file',
  1053. accept: this.accept },
  1054. ref: 'input', on: {
  1055. 'change': this.handleChange
  1056. }
  1057. },
  1058. []
  1059. ), h(
  1060. 'input',
  1061. {
  1062. attrs: { type: 'hidden', name: 'documentDomain', value: this.$isServer ? '' : document.domain }
  1063. },
  1064. []
  1065. ), h(
  1066. 'span',
  1067. { ref: 'data' },
  1068. []
  1069. )]
  1070. ), drag ? h(
  1071. 'upload-dragger',
  1072. {
  1073. on: {
  1074. 'file': uploadFiles
  1075. }
  1076. },
  1077. [this.$slots.default]
  1078. ) : this.$slots.default]
  1079. );
  1080. }
  1081. };
  1082. /***/ },
  1083. /***/ 367:
  1084. /***/ function(module, exports) {
  1085. module.exports = require("element-ui/lib/mixins/migrating");
  1086. /***/ }
  1087. /******/ });