github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

iframe upload use post message to get the res content

pull/671/head
baiyaaaaa 2016-10-27 10:58:32 +08:00
parent 99ac92e656
commit a52b251fc8
3 changed files with 45 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/upload/src/iframe-upload.vue
View File

@ -17,7 +17,6 @@ export default {
default: 'file' default: 'file'
}, },
withCredentials: Boolean, withCredentials: Boolean,
multiple: Boolean,
accept: String, accept: String,
onStart: Function, onStart: Function,
onProgress: Function, onProgress: Function,
@ -46,8 +45,8 @@ export default {
computed: { computed: {
lastestFile() { lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles; var fileList = this.$parent.fileList;
return uploadedFiles[uploadedFiles.length - 1]; return fileList[fileList.length - 1];
}, },
showCover() { showCover() {
var file = this.lastestFile; var file = this.lastestFile;
@ -59,32 +58,6 @@ export default {
}, },
methods: { 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) { isImage(str) {
return str.indexOf('image') !== -1; return str.indexOf('image') !== -1;
}, },
@ -94,16 +67,15 @@ export default {
} }
}, },
handleChange(ev) { handleChange(ev) {
const files = ev.target.files; const file = ev.target.files[0];
this.file = files; this.file = file;
this.onStart(file);
this.onStart(files);
const formNode = this.getFormNode(); const formNode = this.getFormNode();
const dataSpan = this.getFormDataNode(); const dataSpan = this.getFormDataNode();
let data = this.data; let data = this.data;
if (typeof data === 'function') { if (typeof data === 'function') {
data = data(files); data = data(file);
} }
const inputs = []; const inputs = [];
for (const key in data) { for (const key in data) {
@ -116,25 +88,11 @@ export default {
dataSpan.innerHTML = ''; dataSpan.innerHTML = '';
this.disabled = true; this.disabled = true;
}, },
onLoad() { getFormNode() {
let response; return this.$refs.form;
const eventFile = this.file; },
if (!eventFile) { return; } getFormDataNode() {
try { return this.$refs.data;
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;
}, },
onDrop(e) { onDrop(e) {
e.preventDefault(); e.preventDefault();
@ -149,23 +107,26 @@ export default {
e.preventDefault(); e.preventDefault();
this.onDrop = false; this.onDrop = false;
}, },
getIframeNode() { onload(e) {
return this.$refs.iframe; this.disabled = false;
},
getIframeDocument() {
return this.getIframeNode().contentDocument;
},
getFormNode() {
return this.$refs.form;
},
getFormDataNode() {
return this.$refs.data;
} }
}, },
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) { render(h) {
var cover = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>; var cover = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>;
var frameName = 'frame-' + Date.now(); var frameName = 'frame-' + Date.now();
@ -183,8 +144,8 @@ export default {
nativeOn-dragleave={this.handleDragleave} nativeOn-dragleave={this.handleDragleave}
> >
<iframe <iframe
on-load={this.onload}
ref="iframe" ref="iframe"
on-load={this.onLoad}
name={frameName} name={frameName}
> >
</iframe> </iframe>
@ -195,7 +156,6 @@ export default {
ref="input" ref="input"
name="file" name="file"
on-change={this.handleChange} on-change={this.handleChange}
multiple={this.multiple}
accept={this.accept}> accept={this.accept}>
</input> </input>
<input type="hidden" name="documentDomain" value={document.domain} /> <input type="hidden" name="documentDomain" value={document.domain} />

26
packages/upload/src/index.vue
View File

@ -25,10 +25,7 @@ export default {
headers: { headers: {
type: Object, type: Object,
default() { default() {
return { return {};
// 'Access-Control-Request-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
// 'Access-Control-Request-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description'
};
} }
}, },
data: Object, data: Object,
@ -73,7 +70,7 @@ export default {
data() { data() {
return { return {
uploadedFiles: [], fileList: [],
dragOver: false, dragOver: false,
draging: false, draging: false,
tempIndex: 1 tempIndex: 1
@ -101,11 +98,11 @@ export default {
} }
} }
this.uploadedFiles.push(_file); this.fileList.push(_file);
}, },
handleProgress(ev, file) { handleProgress(ev, file) {
var _file = this.getFile(file); var _file = this.getFile(file);
_file.percentage = ev.percent; _file.percentage = ev.percent || 0;
}, },
handleSuccess(res, file) { handleSuccess(res, file) {
var _file = this.getFile(file); var _file = this.getFile(file);
@ -114,7 +111,7 @@ export default {
_file.status = 'finished'; _file.status = 'finished';
_file.response = res; _file.response = res;
this.onSuccess(_file, this.uploadedFiles); this.onSuccess(_file, this.fileList);
setTimeout(() => { setTimeout(() => {
_file.showProgress = false; _file.showProgress = false;
@ -123,7 +120,7 @@ export default {
}, },
handleError(err, file) { handleError(err, file) {
var _file = this.getFile(file); var _file = this.getFile(file);
var fileList = this.uploadedFiles; var fileList = this.fileList;
_file.status = 'fail'; _file.status = 'fail';
@ -132,12 +129,12 @@ export default {
this.onError(err, _file, fileList); this.onError(err, _file, fileList);
}, },
handleRemove(file) { handleRemove(file) {
var fileList = this.uploadedFiles; var fileList = this.fileList;
fileList.splice(fileList.indexOf(file), 1); fileList.splice(fileList.indexOf(file), 1);
this.onRemove(file, fileList); this.onRemove(file, fileList);
}, },
getFile(file) { getFile(file) {
var fileList = this.uploadedFiles; var fileList = this.fileList;
var target; var target;
fileList.every(item => { fileList.every(item => {
target = file.uid === item.uid ? item : null; target = file.uid === item.uid ? item : null;
@ -149,16 +146,19 @@ export default {
if (file.status === 'finished') { if (file.status === 'finished') {
this.onPreview(file); this.onPreview(file);
} }
},
clearFiles() {
this.fileList = [];
} }
}, },
render(h) { render(h) {
var uploadList; var uploadList;
if (this.showUploadList && !this.thumbnailMode && this.uploadedFiles.length) { if (this.showUploadList && !this.thumbnailMode && this.fileList.length) {
uploadList = ( uploadList = (
<UploadList <UploadList
files={this.uploadedFiles} files={this.fileList}
on-remove={this.handleRemove} on-remove={this.handleRemove}
on-preview={this.handlePreview}> on-preview={this.handlePreview}>
</UploadList> </UploadList>

5
packages/upload/src/upload.vue
View File

@ -63,8 +63,8 @@ export default {
computed: { computed: {
lastestFile() { lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles; var fileList = this.$parent.fileList;
return uploadedFiles[uploadedFiles.length - 1]; return fileList[fileList.length - 1];
}, },
showCover() { showCover() {
var file = this.lastestFile; var file = this.lastestFile;
@ -86,6 +86,7 @@ export default {
return; return;
} }
this.uploadFiles(files); this.uploadFiles(files);
this.$refs.input.value = null;
}, },
uploadFiles(files) { uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files); let postFiles = Array.prototype.slice.call(files);