Skip to content

Commit

Permalink
iframe upload use post message to get the res content
Browse files Browse the repository at this point in the history
  • Loading branch information
@baiyaaaaa
baiyaaaaa committed Oct 27, 2016
1 parent 99ac92e commit a52b251
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 84 deletions.
98 changes: 29 additions & 69 deletions packages/upload/src/iframe-upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default {
default: 'file'
},
withCredentials: Boolean,
multiple: Boolean,
accept: String,
onStart: Function,
onProgress: Function,
Expand Down Expand Up @@ -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;
Expand All @@ -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 = '<script' + `>document.domain="${domain}";<` + '/script>';
}
return `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
${domainScript}
</head>
<body>
</body>
</html>
`;
},
isImage(str) {
return str.indexOf('image') !== -1;
},
Expand All @@ -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) {
Expand All @@ -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();
Expand All @@ -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 = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>;
var frameName = 'frame-' + Date.now();
Expand All @@ -183,8 +144,8 @@ export default {
nativeOn-dragleave={this.handleDragleave}
>
<iframe
on-load={this.onload}
ref="iframe"
on-load={this.onLoad}
name={frameName}
>
</iframe>
Expand All @@ -195,7 +156,6 @@ export default {
ref="input"
name="file"
on-change={this.handleChange}
multiple={this.multiple}
accept={this.accept}>
</input>
<input type="hidden" name="documentDomain" value={document.domain} />
Expand Down
26 changes: 13 additions & 13 deletions packages/upload/src/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -73,7 +70,7 @@ export default {
data() {
return {
uploadedFiles: [],
fileList: [],
dragOver: false,
draging: false,
tempIndex: 1
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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';
Expand All @@ -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;
Expand All @@ -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 = (
<UploadList
files={this.uploadedFiles}
files={this.fileList}
on-remove={this.handleRemove}
on-preview={this.handlePreview}>
</UploadList>
Expand Down
5 changes: 3 additions & 2 deletions packages/upload/src/upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -86,6 +86,7 @@ export default {
return;
}
this.uploadFiles(files);
this.$refs.input.value = null;
},
uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files);
Expand Down

0 comments on commit a52b251

Please sign in to comment.