|
s;
this.onSuccess(res, file, this.uploadFiles);
this.onChange(file, this.uploadFiles);
}
},
//文件上传失败后改用该方法，在该方法中调用用户设置的on-error和on-change方法，并将对应的参数传递出去
handleError(err, rawFile) {
const file = this.getFile(rawFile);
const fileList = this.uploadFiles;
file.status = 'fail';
fileList.splice(fileList.indexOf(file), 1);
this.onError(err, file, this.uploadFiles);
this.onChange(file, this.uploadFiles);
},
//文件列表移除文件时调用该方法
handleRemove(file, raw) {
if (raw) {
file = this.getFile(raw);
}
let doRemove = () => {
this.abort(file);
let fileList = this.uploadFiles;
fileList.splice(fileList.indexOf(file), 1);
this.onRemove(file, fileList);
};
if (!this.beforeRemove) {
doRemove();
} else if (typeof this.beforeRemove === 'function') {
const before = this.beforeRemove(file, this.uploadFiles);
if (before && before.then) {
before.then(() => {
doRemove();
}, noop);
} else if (before !== false) {
doRemove();
}
}
},
getFile(rawFile) {
let fileList = this.uploadFiles;
let target;
fileList.every(item => {
target = rawFile.uid === item.uid ? item : null;
return !target;
});
return target;
},
abort(file) {
this.$refs['upload-inner'].abort(file);
},
clearFiles() {
this.uploadFiles = [];
},
submit() {
this.uploadFiles
.filter(file => file.status === 'ready')
.forEach(file => {
this.$refs['upload-inner'].upload(file.raw);
});
},
getMigratingConfig() {
return {
props: {
'default-file-list': 'default-file-list is renamed to file-list.',
'show-upload-list': 'show-upload-list is renamed to show-file-list.',
'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'
}
};
}
},
beforeDestroy() {
this.uploadFiles.forEach(file => {
if (file.url && file.url.indexOf('blob:') === 0) {
URL.revokeObjectURL(file.url);
}
});
},
render(h) {
let uploadList;
//如果用户设置showFileList为true，则显示上传文件列表
if (this.showFileList) {
uploadList = (
<UploadList
disabled={this.uploadDisabled}
listType={this.listType}
files={this.uploadFiles}
on-remove={this.handleRemove}
handlePreview={this.onPreview}>
</UploadList>
);
}
const uploadData = {
props: {
type: this.type,
drag: this.drag,
action: this.action,
multiple: this.multiple,
'before-upload': this.beforeUpload,
'with-credentials': this.withCredentials,
headers: this.headers,
name: this.name,
data: this.data,
accept: this.accept,
fileList: this.uploadFiles,
autoUpload: this.autoUpload,
listType: this.listType,
disabled: this.uploadDisabled,
limit: this.limit,
'on-exceed': this.onExceed,
'on-start': this.handleStart,
'on-progress': this.handleProgress,
'on-success': this.handleSuccess,
'on-error': this.handleError,
'on-preview': this.onPreview,
'on-remove': this.handleRemove,
'http-request': this.httpRequest
},
ref: 'upload-inner'
};
const trigger = this.$slots.trigger || this.$slots.default;
const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
return (
<div>
{ this.listType === 'picture-card' ? uploadList : ''}
{
this.$slots.trigger
? [uploadComponent, this.$slots.default]
: uploadComponent
}
{this.$slots.tip}
{ this |