mirror of https://github.com/ElemeFE/element
iframe upload use post message to get the res content
baiyaaaaa
parent
99ac92e656
commit
a52b251fc8
|
|
@ -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 = '<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;
|
||||
},
|
||||
|
|
@ -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 = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>;
|
||||
var frameName = 'frame-' + Date.now();
|
||||
|
|
@ -183,8 +144,8 @@ export default {
|
|||
nativeOn-dragleave={this.handleDragleave}
|
||||
>
|
||||
<iframe
|
||||
on-load={this.onload}
|
||||
ref="iframe"
|
||||
on-load={this.onLoad}
|
||||
name={frameName}
|
||||
>
|
||||
</iframe>
|
||||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
<UploadList
|
||||
files={this.uploadedFiles}
|
||||
files={this.fileList}
|
||||
on-remove={this.handleRemove}
|
||||
on-preview={this.handlePreview}>
|
||||
</UploadList>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue