diff --git a/packages/upload/src/iframe-upload.vue b/packages/upload/src/iframe-upload.vue index 013642686..01af5affa 100644 --- a/packages/upload/src/iframe-upload.vue +++ b/packages/upload/src/iframe-upload.vue @@ -17,7 +17,6 @@ export default { default: 'file' }, withCredentials: Boolean, - multiple: Boolean, accept: String, onStart: Function, onProgress: Function, @@ -46,8 +45,8 @@ export default { computed: { lastestFile() { - var uploadedFiles = this.$parent.uploadedFiles; - return uploadedFiles[uploadedFiles.length - 1]; + var fileList = this.$parent.fileList; + return fileList[fileList.length - 1]; }, showCover() { var file = this.lastestFile; @@ -59,32 +58,6 @@ export default { }, methods: { - resetIframe() { - const iframeNode = this.getIframeNode(); - let win = iframeNode.contentWindow; - let doc = win.document; - - doc.open('text/html', 'replace'); - doc.write(this.getIframeHTML(this.domain)); - doc.close(); - }, - getIframeHTML(domain) { - let domainScript = ''; - if (domain) { - domainScript = 'document.domain="${domain}";<` + '/script>'; - } - return ` - - - - - ${domainScript} - - - - - `; - }, isImage(str) { return str.indexOf('image') !== -1; }, @@ -94,16 +67,15 @@ export default { } }, handleChange(ev) { - const files = ev.target.files; - this.file = files; - - this.onStart(files); + const file = ev.target.files[0]; + this.file = file; + this.onStart(file); const formNode = this.getFormNode(); const dataSpan = this.getFormDataNode(); let data = this.data; if (typeof data === 'function') { - data = data(files); + data = data(file); } const inputs = []; for (const key in data) { @@ -116,25 +88,11 @@ export default { dataSpan.innerHTML = ''; this.disabled = true; }, - onLoad() { - let response; - const eventFile = this.file; - if (!eventFile) { return; } - try { - const doc = this.getIframeDocument(); - const script = doc.getElementsByTagName('script')[0]; - if (script && script.parentNode === doc.body) { - doc.body.removeChild(script); - } - response = doc.body.innerHTML; - this.onSuccess(response, eventFile); - } catch (err) { - console.log(err); - console.warn(false, 'cross domain error for Upload'); - this.onError(err, eventFile); - } - this.resetIframe(); - this.disabled = false; + getFormNode() { + return this.$refs.form; + }, + getFormDataNode() { + return this.$refs.data; }, onDrop(e) { e.preventDefault(); @@ -149,23 +107,26 @@ export default { e.preventDefault(); this.onDrop = false; }, - getIframeNode() { - return this.$refs.iframe; - }, - - getIframeDocument() { - return this.getIframeNode().contentDocument; - }, - - getFormNode() { - return this.$refs.form; - }, - - getFormDataNode() { - return this.$refs.data; + onload(e) { + this.disabled = false; } }, + mounted() { + window.addEventListener('message', (event) => { + var targetOrigin = new URL(this.action).origin; + if (event.origin !== targetOrigin) { + return false; + } + var response = event.data; + if (response.result === 'success') { + this.onSuccess(response, this.file); + } else if (response.result === 'failed') { + this.onSuccess(response, this.file); + } + }, false); + }, + render(h) { var cover = ; var frameName = 'frame-' + Date.now(); @@ -183,8 +144,8 @@ export default { nativeOn-dragleave={this.handleDragleave} > @@ -195,7 +156,6 @@ export default { ref="input" name="file" on-change={this.handleChange} - multiple={this.multiple} accept={this.accept}> diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue index ce69cb596..fc3245ea3 100644 --- a/packages/upload/src/index.vue +++ b/packages/upload/src/index.vue @@ -25,10 +25,7 @@ export default { headers: { type: Object, default() { - return { - // 'Access-Control-Request-Methods': 'GET, PUT, POST, DELETE, OPTIONS', - // 'Access-Control-Request-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description' - }; + return {}; } }, data: Object, @@ -73,7 +70,7 @@ export default { data() { return { - uploadedFiles: [], + fileList: [], dragOver: false, draging: false, tempIndex: 1 @@ -101,11 +98,11 @@ export default { } } - this.uploadedFiles.push(_file); + this.fileList.push(_file); }, handleProgress(ev, file) { var _file = this.getFile(file); - _file.percentage = ev.percent; + _file.percentage = ev.percent || 0; }, handleSuccess(res, file) { var _file = this.getFile(file); @@ -114,7 +111,7 @@ export default { _file.status = 'finished'; _file.response = res; - this.onSuccess(_file, this.uploadedFiles); + this.onSuccess(_file, this.fileList); setTimeout(() => { _file.showProgress = false; @@ -123,7 +120,7 @@ export default { }, handleError(err, file) { var _file = this.getFile(file); - var fileList = this.uploadedFiles; + var fileList = this.fileList; _file.status = 'fail'; @@ -132,12 +129,12 @@ export default { this.onError(err, _file, fileList); }, handleRemove(file) { - var fileList = this.uploadedFiles; + var fileList = this.fileList; fileList.splice(fileList.indexOf(file), 1); this.onRemove(file, fileList); }, getFile(file) { - var fileList = this.uploadedFiles; + var fileList = this.fileList; var target; fileList.every(item => { target = file.uid === item.uid ? item : null; @@ -149,16 +146,19 @@ export default { if (file.status === 'finished') { this.onPreview(file); } + }, + clearFiles() { + this.fileList = []; } }, render(h) { var uploadList; - if (this.showUploadList && !this.thumbnailMode && this.uploadedFiles.length) { + if (this.showUploadList && !this.thumbnailMode && this.fileList.length) { uploadList = ( diff --git a/packages/upload/src/upload.vue b/packages/upload/src/upload.vue index 20ede25b0..bb33f2f6b 100644 --- a/packages/upload/src/upload.vue +++ b/packages/upload/src/upload.vue @@ -63,8 +63,8 @@ export default { computed: { lastestFile() { - var uploadedFiles = this.$parent.uploadedFiles; - return uploadedFiles[uploadedFiles.length - 1]; + var fileList = this.$parent.fileList; + return fileList[fileList.length - 1]; }, showCover() { var file = this.lastestFile; @@ -86,6 +86,7 @@ export default { return; } this.uploadFiles(files); + this.$refs.input.value = null; }, uploadFiles(files) { let postFiles = Array.prototype.slice.call(files);