first
This commit is contained in:
Ivan
8
packages/upload/index.js
Normal file
8
packages/upload/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import Upload from './src';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Upload.install = function(Vue) {
|
||||
Vue.component(Upload.name, Upload);
|
||||
};
|
||||
|
||||
export default Upload;
|
||||
85
packages/upload/src/ajax.js
Normal file
85
packages/upload/src/ajax.js
Normal file
@@ -0,0 +1,85 @@
|
||||
function getError(action, option, xhr) {
|
||||
let msg;
|
||||
if (xhr.response) {
|
||||
msg = `${xhr.response.error || xhr.response}`;
|
||||
} else if (xhr.responseText) {
|
||||
msg = `${xhr.responseText}`;
|
||||
} else {
|
||||
msg = `fail to post ${action} ${xhr.status}`;
|
||||
}
|
||||
|
||||
const err = new Error(msg);
|
||||
err.status = xhr.status;
|
||||
err.method = 'post';
|
||||
err.url = action;
|
||||
return err;
|
||||
}
|
||||
|
||||
function getBody(xhr) {
|
||||
const text = xhr.responseText || xhr.response;
|
||||
if (!text) {
|
||||
return text;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch (e) {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
export default function upload(option) {
|
||||
if (typeof XMLHttpRequest === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
const action = option.action;
|
||||
|
||||
if (xhr.upload) {
|
||||
xhr.upload.onprogress = function progress(e) {
|
||||
if (e.total > 0) {
|
||||
e.percent = e.loaded / e.total * 100;
|
||||
}
|
||||
option.onProgress(e);
|
||||
};
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
if (option.data) {
|
||||
Object.keys(option.data).forEach(key => {
|
||||
formData.append(key, option.data[key]);
|
||||
});
|
||||
}
|
||||
|
||||
formData.append(option.filename, option.file, option.file.name);
|
||||
|
||||
xhr.onerror = function error(e) {
|
||||
option.onError(e);
|
||||
};
|
||||
|
||||
xhr.onload = function onload() {
|
||||
if (xhr.status < 200 || xhr.status >= 300) {
|
||||
return option.onError(getError(action, option, xhr));
|
||||
}
|
||||
|
||||
option.onSuccess(getBody(xhr));
|
||||
};
|
||||
|
||||
xhr.open('post', action, true);
|
||||
|
||||
if (option.withCredentials && 'withCredentials' in xhr) {
|
||||
xhr.withCredentials = true;
|
||||
}
|
||||
|
||||
const headers = option.headers || {};
|
||||
|
||||
for (let item in headers) {
|
||||
if (headers.hasOwnProperty(item) && headers[item] !== null) {
|
||||
xhr.setRequestHeader(item, headers[item]);
|
||||
}
|
||||
}
|
||||
xhr.send(formData);
|
||||
return xhr;
|
||||
}
|
||||
338
packages/upload/src/index.vue
Normal file
338
packages/upload/src/index.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<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,
|
||||
required: true
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
uploadFiles: [],
|
||||
dragOver: false,
|
||||
draging: false,
|
||||
tempIndex: 1
|
||||
};
|
||||
},
|
||||
|
||||
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,
|
||||
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.listType !== 'picture-card' ? uploadList : ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
70
packages/upload/src/upload-dragger.vue
Normal file
70
packages/upload/src/upload-dragger.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div
|
||||
class="el-upload-dragger"
|
||||
:class="{
|
||||
'is-dragover': dragover
|
||||
}"
|
||||
@drop.prevent="onDrop"
|
||||
@dragover.prevent="onDragover"
|
||||
@dragleave.prevent="dragover = false"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElUploadDrag',
|
||||
props: {
|
||||
disabled: Boolean
|
||||
},
|
||||
inject: {
|
||||
uploader: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dragover: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDragover() {
|
||||
if (!this.disabled) {
|
||||
this.dragover = true;
|
||||
}
|
||||
},
|
||||
onDrop(e) {
|
||||
if (this.disabled || !this.uploader) return;
|
||||
const accept = this.uploader.accept;
|
||||
this.dragover = false;
|
||||
if (!accept) {
|
||||
this.$emit('file', e.dataTransfer.files);
|
||||
return;
|
||||
}
|
||||
this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
|
||||
const { type, name } = file;
|
||||
const extension = name.indexOf('.') > -1
|
||||
? `.${ name.split('.').pop() }`
|
||||
: '';
|
||||
const baseType = type.replace(/\/.*$/, '');
|
||||
return accept.split(',')
|
||||
.map(type => type.trim())
|
||||
.filter(type => type)
|
||||
.some(acceptedType => {
|
||||
if (/\..+$/.test(acceptedType)) {
|
||||
return extension === acceptedType;
|
||||
}
|
||||
if (/\/\*$/.test(acceptedType)) {
|
||||
return baseType === acceptedType.replace(/\/\*$/, '');
|
||||
}
|
||||
if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
|
||||
return type === acceptedType;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
105
packages/upload/src/upload-list.vue
Normal file
105
packages/upload/src/upload-list.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<transition-group
|
||||
tag="ul"
|
||||
:class="[
|
||||
'el-upload-list',
|
||||
'el-upload-list--' + listType,
|
||||
{ 'is-disabled': disabled }
|
||||
]"
|
||||
name="el-list"
|
||||
>
|
||||
<li
|
||||
v-for="file in files"
|
||||
:class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
|
||||
:key="file.uid"
|
||||
tabindex="0"
|
||||
@keydown.delete="!disabled && $emit('remove', file)"
|
||||
@focus="focusing = true"
|
||||
@blur="focusing = false"
|
||||
@click="focusing = false"
|
||||
>
|
||||
<slot :file="file">
|
||||
<img
|
||||
class="el-upload-list__item-thumbnail"
|
||||
v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
|
||||
:src="file.url" alt=""
|
||||
>
|
||||
<a class="el-upload-list__item-name" @click="handleClick(file)">
|
||||
<i class="el-icon-document"></i>{{file.name}}
|
||||
</a>
|
||||
<label class="el-upload-list__item-status-label">
|
||||
<i :class="{
|
||||
'el-icon-upload-success': true,
|
||||
'el-icon-circle-check': listType === 'text',
|
||||
'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
|
||||
}"></i>
|
||||
</label>
|
||||
<i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
|
||||
<i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
|
||||
<el-progress
|
||||
v-if="file.status === 'uploading'"
|
||||
:type="listType === 'picture-card' ? 'circle' : 'line'"
|
||||
:stroke-width="listType === 'picture-card' ? 6 : 2"
|
||||
:percentage="parsePercentage(file.percentage)">
|
||||
</el-progress>
|
||||
<span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
v-if="handlePreview && listType === 'picture-card'"
|
||||
@click="handlePreview(file)"
|
||||
>
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="$emit('remove', file)"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</slot>
|
||||
</li>
|
||||
</transition-group>
|
||||
</template>
|
||||
<script>
|
||||
import Locale from 'element-ui/src/mixins/locale';
|
||||
import ElProgress from 'element-ui/packages/progress';
|
||||
|
||||
export default {
|
||||
|
||||
name: 'ElUploadList',
|
||||
|
||||
mixins: [Locale],
|
||||
|
||||
data() {
|
||||
return {
|
||||
focusing: false
|
||||
};
|
||||
},
|
||||
components: { ElProgress },
|
||||
|
||||
props: {
|
||||
files: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
handlePreview: Function,
|
||||
listType: String
|
||||
},
|
||||
methods: {
|
||||
parsePercentage(val) {
|
||||
return parseInt(val, 10);
|
||||
},
|
||||
handleClick(file) {
|
||||
this.handlePreview && this.handlePreview(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
211
packages/upload/src/upload.vue
Normal file
211
packages/upload/src/upload.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<script>
|
||||
import ajax from './ajax';
|
||||
import UploadDragger from './upload-dragger.vue';
|
||||
|
||||
export default {
|
||||
inject: ['uploader'],
|
||||
components: {
|
||||
UploadDragger
|
||||
},
|
||||
props: {
|
||||
type: String,
|
||||
action: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
data: Object,
|
||||
headers: Object,
|
||||
withCredentials: Boolean,
|
||||
multiple: Boolean,
|
||||
accept: String,
|
||||
onStart: Function,
|
||||
onProgress: Function,
|
||||
onSuccess: Function,
|
||||
onError: Function,
|
||||
beforeUpload: Function,
|
||||
drag: Boolean,
|
||||
onPreview: {
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
onRemove: {
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
fileList: Array,
|
||||
autoUpload: Boolean,
|
||||
listType: String,
|
||||
httpRequest: {
|
||||
type: Function,
|
||||
default: ajax
|
||||
},
|
||||
disabled: Boolean,
|
||||
limit: Number,
|
||||
onExceed: Function
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mouseover: false,
|
||||
reqs: {}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
isImage(str) {
|
||||
return str.indexOf('image') !== -1;
|
||||
},
|
||||
handleChange(ev) {
|
||||
const files = ev.target.files;
|
||||
|
||||
if (!files) return;
|
||||
this.uploadFiles(files);
|
||||
},
|
||||
uploadFiles(files) {
|
||||
if (this.limit && this.fileList.length + files.length > this.limit) {
|
||||
this.onExceed && this.onExceed(files, this.fileList);
|
||||
return;
|
||||
}
|
||||
|
||||
let postFiles = Array.prototype.slice.call(files);
|
||||
if (!this.multiple) { postFiles = postFiles.slice(0, 1); }
|
||||
|
||||
if (postFiles.length === 0) { return; }
|
||||
|
||||
postFiles.forEach(rawFile => {
|
||||
this.onStart(rawFile);
|
||||
if (this.autoUpload) this.upload(rawFile);
|
||||
});
|
||||
},
|
||||
upload(rawFile) {
|
||||
this.$refs.input.value = null;
|
||||
|
||||
if (!this.beforeUpload) {
|
||||
return this.post(rawFile);
|
||||
}
|
||||
|
||||
const before = this.beforeUpload(rawFile);
|
||||
if (before && before.then) {
|
||||
before.then(processedFile => {
|
||||
const fileType = Object.prototype.toString.call(processedFile);
|
||||
|
||||
if (fileType === '[object File]' || fileType === '[object Blob]') {
|
||||
if (fileType === '[object Blob]') {
|
||||
processedFile = new File([processedFile], rawFile.name, {
|
||||
type: rawFile.type
|
||||
});
|
||||
}
|
||||
for (const p in rawFile) {
|
||||
if (rawFile.hasOwnProperty(p)) {
|
||||
processedFile[p] = rawFile[p];
|
||||
}
|
||||
}
|
||||
this.post(processedFile);
|
||||
} else {
|
||||
this.post(rawFile);
|
||||
}
|
||||
}, () => {
|
||||
this.onRemove(null, rawFile);
|
||||
});
|
||||
} else if (before !== false) {
|
||||
this.post(rawFile);
|
||||
} else {
|
||||
this.onRemove(null, rawFile);
|
||||
}
|
||||
},
|
||||
abort(file) {
|
||||
const { reqs } = this;
|
||||
if (file) {
|
||||
let uid = file;
|
||||
if (file.uid) uid = file.uid;
|
||||
if (reqs[uid]) {
|
||||
reqs[uid].abort();
|
||||
}
|
||||
} else {
|
||||
Object.keys(reqs).forEach((uid) => {
|
||||
if (reqs[uid]) reqs[uid].abort();
|
||||
delete reqs[uid];
|
||||
});
|
||||
}
|
||||
},
|
||||
post(rawFile) {
|
||||
const { uid } = rawFile;
|
||||
const options = {
|
||||
headers: this.headers,
|
||||
withCredentials: this.withCredentials,
|
||||
file: rawFile,
|
||||
data: this.data,
|
||||
filename: this.name,
|
||||
action: this.action,
|
||||
onProgress: e => {
|
||||
this.onProgress(e, rawFile);
|
||||
},
|
||||
onSuccess: res => {
|
||||
this.onSuccess(res, rawFile);
|
||||
delete this.reqs[uid];
|
||||
},
|
||||
onError: err => {
|
||||
this.onError(err, rawFile);
|
||||
delete this.reqs[uid];
|
||||
}
|
||||
};
|
||||
const req = this.httpRequest(options);
|
||||
this.reqs[uid] = req;
|
||||
if (req && req.then) {
|
||||
req.then(options.onSuccess, options.onError);
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
if (!this.disabled) {
|
||||
this.$refs.input.value = null;
|
||||
this.$refs.input.click();
|
||||
}
|
||||
},
|
||||
handleKeydown(e) {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.keyCode === 13 || e.keyCode === 32) {
|
||||
this.handleClick();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let {
|
||||
handleClick,
|
||||
drag,
|
||||
name,
|
||||
handleChange,
|
||||
multiple,
|
||||
accept,
|
||||
listType,
|
||||
uploadFiles,
|
||||
disabled,
|
||||
handleKeydown
|
||||
} = this;
|
||||
const data = {
|
||||
class: {
|
||||
'el-upload': true
|
||||
},
|
||||
on: {
|
||||
click: handleClick,
|
||||
keydown: handleKeydown
|
||||
}
|
||||
};
|
||||
data.class[`el-upload--${listType}`] = true;
|
||||
return (
|
||||
<div {...data} tabindex="0" >
|
||||
{
|
||||
drag
|
||||
? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
|
||||
: this.$slots.default
|
||||
}
|
||||
<input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user