354 lines
9.4 KiB
Vue
354 lines
9.4 KiB
Vue
|
<script>
|
||
|
|
import UploadList from './upload-list';
|
||
|
|
import Upload from './upload';
|
||
|
|
import ElProgress from 'element-ui/packages/progress';
|
||
|
|
import Migrating from 'element-ui/src/mixins/migrating';
|
||
|
|
function noop() {}
|
||
|
|
export default {
|
||
|
|
name: 'ElUpload',
|
||
|
|
mixins: [Migrating],
|
||
|
|
components: {
|
||
|
|
ElProgress,
|
||
|
|
UploadList,
|
||
|
|
Upload
|
||
|
|
},
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
uploader: this
|
||
|
|
};
|
||
|
|
},
|
||
|
|
inject: {
|
||
|
|
elForm: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
action: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
headers: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: Object,
|
||
|
|
multiple: Boolean,
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
default: 'file'
|
||
|
|
},
|
||
|
|
drag: Boolean,
|
||
|
|
dragger: Boolean,
|
||
|
|
withCredentials: Boolean,
|
||
|
|
showFileList: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
accept: String,
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'select'
|
||
|
|
},
|
||
|
|
beforeUpload: Function,
|
||
|
|
beforeRemove: Function,
|
||
|
|
onRemove: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
onChange: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
onPreview: {
|
||
|
|
type: Function
|
||
|
|
},
|
||
|
|
onSuccess: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
onProgress: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
onError: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
fileList: {
|
||
|
|
type: Array,
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
autoUpload: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
listType: {
|
||
|
|
type: String,
|
||
|
|
default: 'text' // text,picture,picture-card
|
||
|
|
},
|
||
|
|
httpRequest: Function,
|
||
|
|
disabled: Boolean,
|
||
|
|
limit: Number,
|
||
|
|
onExceed: {
|
||
|
|
type: Function,
|
||
|
|
default: noop
|
||
|
|
},
|
||
|
|
appId: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
repositoryName: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
groupValue: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
fileValue: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
extParam: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
uploadFiles: [],
|
||
|
|
dragOver: false,
|
||
|
|
draging: false,
|
||
|
|
tempIndex: 1,
|
||
|
|
sid: this.$store.state.sessionId
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
uploadDisabled() {
|
||
|
|
return this.disabled || (this.elForm || {}).disabled;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
listType(type) {
|
||
|
|
if (type === 'picture-card' || type === 'picture') {
|
||
|
|
this.uploadFiles = this.uploadFiles.map(file => {
|
||
|
|
if (!file.url && file.raw) {
|
||
|
|
try {
|
||
|
|
file.url = URL.createObjectURL(file.raw);
|
||
|
|
} catch (err) {
|
||
|
|
console.error('[Element Error][Upload]', err);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return file;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fileList: {
|
||
|
|
immediate: true,
|
||
|
|
handler(fileList) {
|
||
|
|
this.uploadFiles = fileList.map(item => {
|
||
|
|
item.uid = item.uid || (Date.now() + this.tempIndex++);
|
||
|
|
item.status = item.status || 'success';
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleStart(rawFile) {
|
||
|
|
rawFile.uid = Date.now() + this.tempIndex++;
|
||
|
|
let file = {
|
||
|
|
status: 'ready',
|
||
|
|
name: rawFile.name,
|
||
|
|
size: rawFile.size,
|
||
|
|
percentage: 0,
|
||
|
|
uid: rawFile.uid,
|
||
|
|
raw: rawFile
|
||
|
|
};
|
||
|
|
if (this.listType === 'picture-card' || this.listType === 'picture') {
|
||
|
|
try {
|
||
|
|
file.url = URL.createObjectURL(rawFile);
|
||
|
|
} catch (err) {
|
||
|
|
console.error('[Element Error][Upload]', err);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.uploadFiles.push(file);
|
||
|
|
this.onChange(file, this.uploadFiles);
|
||
|
|
},
|
||
|
|
handleProgress(ev, rawFile) {
|
||
|
|
const file = this.getFile(rawFile);
|
||
|
|
this.onProgress(ev, file, this.uploadFiles);
|
||
|
|
file.status = 'uploading';
|
||
|
|
file.percentage = ev.percent || 0;
|
||
|
|
},
|
||
|
|
handleSuccess(res, rawFile) {
|
||
|
|
const file = this.getFile(rawFile);
|
||
|
|
if (file) {
|
||
|
|
file.status = 'success';
|
||
|
|
file.response = res;
|
||
|
|
this.onSuccess(res, file, this.uploadFiles);
|
||
|
|
this.onChange(file, this.uploadFiles);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
if (this.showFileList) {
|
||
|
|
uploadList = (
|
||
|
|
<UploadList
|
||
|
|
disabled={this.uploadDisabled}
|
||
|
|
listType={this.listType}
|
||
|
|
files={this.uploadFiles}
|
||
|
|
on-remove={this.handleRemove}
|
||
|
|
handlePreview={this.onPreview}>
|
||
|
|
{
|
||
|
|
(props) => {
|
||
|
|
if (this.$scopedSlots.file) {
|
||
|
|
return this.$scopedSlots.file({
|
||
|
|
file: props.file
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</UploadList>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
const uploadData = {
|
||
|
|
props: {
|
||
|
|
type: this.type,
|
||
|
|
drag: this.drag,
|
||
|
|
action: this.action != undefined && this.action != '' ? this.action : encodeURI(getUploadDestination() + "appId=" + this.appId + "&sid=" + this.sid + "&groupValue=" + this.groupValue + "&fileValue=" + this.fileValue + "&repositoryName=" + this.repositoryName + "&extParam=" + this.extParam),
|
||
|
|
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,
|
||
|
|
appId: this.appId,
|
||
|
|
repositoryName: this.repositoryName,
|
||
|
|
groupValue: this.groupValue,
|
||
|
|
fileValue: this.fileValue,
|
||
|
|
extParam: this.extParam,
|
||
|
|
sid: this.sid
|
||
|
|
},
|
||
|
|
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.listType !== 'picture-card' ? uploadList : ''}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function getUploadDestination() {
|
||
|
|
var url = axiosBaseUrl;
|
||
|
|
var ret = "uf";
|
||
|
|
if (url && url.indexOf("/r/") != -1) {
|
||
|
|
ret = url.substring(0, url.indexOf("/r/")) + "/r/uf";
|
||
|
|
} else if (url && url.indexOf("/apps") > -1) {
|
||
|
|
ret = url.substring(0, url.indexOf("/apps")) + "/r/uf";
|
||
|
|
}
|
||
|
|
var finalUrl = ret + "?";
|
||
|
|
return finalUrl;
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|