Skip to content

E
Element
Commit 2f61998e authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

add autoUpload

parent 88a070ab
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 253 deletions
examples/docs/zh-CN/upload.md
View file @ 2f61998e
...@@ -49,6 +49,9 @@ ...@@ -49,6 +49,9 @@
}, },
handleError(err, file, fileList) { handleError(err, file, fileList) {
console.log(err); console.log(err);
},
submitUpload() {
this.$refs.upload.submit();
} }
} }
} }
...@@ -69,7 +72,7 @@ ...@@ -69,7 +72,7 @@
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList"> :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
...@@ -95,11 +98,12 @@ ...@@ -95,11 +98,12 @@
```html ```html
<el-upload <el-upload
class="upload-demo" class="upload-demo"
dragger draggable
action="//jsonplaceholder.typicode.com/posts/" action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList"> :file-list="fileList"
thumbnail-mode>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload-dragger__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
...@@ -107,6 +111,42 @@ ...@@ -107,6 +111,42 @@
``` ```
::: :::
### 手动上传
::: demo
```html
<el-upload
class="upload-demo"
ref="upload"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
```
:::
<!-- ### 拖拽上传 <!-- ### 拖拽上传
可将文件拖入指定区域进行上传。 可将文件拖入指定区域进行上传。
......
packages/theme-default/src/upload.css
View file @ 2f61998e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@component-namespace el { @component-namespace el {
@b upload { @b upload {
width: 360px; display: inline-block;
@e input { @e input {
display: none; display: none;
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
width: 100%; width: 100%;
position: relative; position: relative;
a { @e name {
color: var(--color-extra-light-black); color: var(--color-extra-light-black);
display: block; display: block;
margin-right: 40px; margin-right: 40px;
...@@ -56,6 +56,12 @@ ...@@ -56,6 +56,12 @@
line-height: inherit; line-height: inherit;
} }
} }
@e icon {
position: absolute;
right: 0;
top: 0;
line-height: inherit;
}
& .el-progress { & .el-progress {
position: absolute; position: absolute;
bottom: -3px; bottom: -3px;
...@@ -74,18 +80,29 @@ ...@@ -74,18 +80,29 @@
&:hover { &:hover {
background-color: var(--color-extra-light-gray); background-color: var(--color-extra-light-gray);
} }
@when finished { @when success {
& a:hover { .el-upload__file__icon {
color: var(--color-success);
}
.el-upload__file__name:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
.el-upload__file__icon {
display: none;
}
.el-upload__btn-delete { .el-upload__btn-delete {
display: block; display: block;
cursor: pointer; cursor: pointer;
} }
} }
} }
@when fail {
.el-upload__file__icon {
color: var(--color-error);
}
}
} }
@e tip { @e tip {
font-size: 12px; font-size: 12px;
...@@ -100,168 +117,187 @@ ...@@ -100,168 +117,187 @@
color: var(--color-primary); color: var(--color-primary);
display: none; display: none;
} }
/* 拖拽模式 */
@m draggable {
background-color: var(--color-dark-white);
border: 1px solid var(--color-extra-light-silver);
box-sizing: border-box;
width: 360px;
height: 180px;
border-radius: 4px;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
& .el-upload__inner {
display: block;
height: 100%;
}
& .el-icon-upload {
font-size: 67px;
color: var(--color-light-silver);
margin: 40px 0 16px;
line-height: 50px;
}
& + .el-upload__tip {
text-align: center;
}
& ~ .el-upload__files {
margin-top: 7px;
padding-top: 5px;
border-top: 1px solid rgba(var(--color-extra-light-silver), .2);
}
@e text {
color: var(--color-light-silver);
font-size: 14px;
text-align: center;
& em {
color: var(--color-primary);
font-style: normal;
}
}
&:not(.is-showCover):hover {
border-color: var(--color-primary);
}
@when dragOver {
background-color: rgba(32, 159, 255, .06);
border: 2px dashed var(--color-primary);
}
}
} }
@b upload-dragger { @b upload-cover {
background-color: var(--color-dark-white); position: absolute;
border: 1px solid var(--color-extra-light-silver); left: 0;
box-sizing: border-box; top: 0;
width: 360px; width: 100%;
height: 180px; height: 100%;
border-radius: 4px;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden; overflow: hidden;
z-index: 10;
cursor: default;
@utils-vertical-center;
& .el-upload__inner { & img {
display: block; display: block;
width: 100%;
height: 100%; height: 100%;
} }
& .el-icon-upload {
font-size: 67px;
color: var(--color-light-silver);
margin: 40px 0 16px;
line-height: 50px;
}
& + .el-upload__tip { @e label {
position: absolute;
right: -15px;
top: -6px;
width: 40px;
height: 24px;
background: #13ce66;
text-align: center; text-align: center;
transform: rotate(45deg);
box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
i {
font-size: 12px;
margin-top: 11px;
transform: rotate(-45deg) scale(0.8);
color: #fff;
}
} }
& ~ .el-upload__files {
margin-top: 7px; @e progress {
padding-top: 5px; display: inline-block;
border-top: 1px solid rgba(var(--color-extra-light-silver), .2); vertical-align: middle;
position: static;
width: 243px;
& + .el-upload__inner {
opacity: 0;
}
} }
@e cover { @e content {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; }
z-index: 10;
cursor: default;
@utils-vertical-center;
& img { @e interact {
display: block; position: absolute;
width: 100%; bottom: 0;
height: 100%; left: 0;
} width: 100%;
height: 100%;
background-color: rgba(#000, .72);
text-align: center;
@e progress { & .btn {
display: inline-block; display: inline-block;
color: var(--color-white);
font-size: 14px;
cursor: pointer;
vertical-align: middle; vertical-align: middle;
position: static; transition: var(--md-fade-transition);
width: 243px; margin-top: 60px;
& + .el-upload__inner { & i {
opacity: 0; margin-top: 0;
} }
}
@e content { & span {
position: absolute; opacity: 0;
top: 0; transition: opacity .15s linear;
left: 0; }
width: 100%;
height: 100%;
}
@e interact {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, .72);
text-align: center;
& .btn { &:not(:first-child) {
display: inline-block; margin-left: 35px;
color: var(--color-white); }
font-size: 14px;
cursor: pointer;
vertical-align: middle;
transition: var(--md-fade-transition);
margin-top: 60px;
& i { &:hover {
margin-top: 0; transform: translateY(-13px);
}
& span { & span {
opacity: 0; opacity: 1;
transition: opacity .15s linear;
}
&:not(:first-child) {
margin-left: 35px;
}
&:hover {
transform: translateY(-13px);
& span {
opacity: 1;
}
}
& i {
color: var(--color-white);
display: block;
font-size: 24px;
line-height: inherit;
margin: 0 auto 5px;
} }
} }
}
@e title { & i {
position: absolute; color: var(--color-white);
bottom: 0; display: block;
left: 0; font-size: 24px;
background-color: var(--color-white); line-height: inherit;
height: 36px; margin: 0 auto 5px;
width: 100%; }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
text-align: left;
padding: 0 10px;
margin: 0;
line-height: 36px;
font-size: 14px;
color: var(--color-extra-light-black);
}
& + .el-upload__inner {
opacity: 0;
position: relative;
z-index: 1;
} }
} }
@e text { @e title {
color: var(--color-light-silver); position: absolute;
bottom: 0;
left: 0;
background-color: var(--color-white);
height: 36px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
text-align: left;
padding: 0 10px;
margin: 0;
line-height: 36px;
font-size: 14px; font-size: 14px;
text-align: center; color: var(--color-extra-light-black);
& em {
color: var(--color-primary);
font-style: normal;
}
}
&:not(.is-showCover):hover {
border-color: var(--color-primary);
} }
@when dragOver { & + .el-upload__inner {
background-color: rgba(32, 159, 255, .06); opacity: 0;
border: 2px dashed var(--color-primary); position: relative;
z-index: 1;
} }
} }
} }
packages/upload/src/cover.vue
View file @ 2f61998e
<template> <template>
<div class="el-dragger__cover" @click.stop v-if="image"> <div class="el-upload-cover" @click.stop v-if="image">
<transition name="el-fade-in"> <transition name="el-fade-in">
<el-progress <el-progress
class="el-dragger__cover__progress" class="el-upload-cover__progress"
v-if="image.status === 'uploading'" v-if="image.status === 'uploading'"
:percentage="image.percentage" :percentage="image.percentage"
:show-text="false" :show-text="false"
:status="image.status === 'finished' ? 'success' : ''"> >
</el-progress> </el-progress>
</transition> </transition>
<div <div
class="el-dragger__cover__content" class="el-upload-cover__content"
v-if="image.status === 'finished'" v-if="image.status === 'success'"
@mouseenter="mouseover = true" @mouseenter="mouseover = true"
@mouseleave="mouseover = false" @mouseleave="mouseover = false"
> >
<img :src="image.url"> <img :src="image.url">
<label class="el-upload-cover__label"><i class="el-icon-check"></i></label>
<transition name="el-fade-in"> <transition name="el-fade-in">
<div v-show="mouseover" class="el-dragger__cover__interact"> <div v-show="mouseover" class="el-upload-cover__interact">
<div class="el-draggeer__cover__btns"> <div class="el-draggeer__cover__btns">
<span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>{{ t('el.upload.continue') }}</span></span> <span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>{{ t('el.upload.continue') }}</span></span>
<span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>{{ t('el.upload.preview') }}</span></span> <span class="btn" @click="$emit('preview', image)"><i class="el-icon-view"></i><span>{{ t('el.upload.preview') }}</span></span>
<span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>{{ t('el.upload.delete') }}</span></span> <span class="btn" @click="$emit('remove', image)"><i class="el-icon-delete2"></i><span>{{ t('el.upload.delete') }}</span></span>
</div> </div>
</div> </div>
</transition> </transition>
<transition name="el-zoom-in-bottom"> <transition name="el-zoom-in-bottom">
<h4 v-show="mouseover" class="el-dragger__cover__title">{{image.name}}</h4> <h4 v-show="mouseover" class="el-upload-cover__title">{{image.name}}</h4>
</transition> </transition>
</div> </div>
</div> </div>
......
packages/upload/src/dragger.js 0 → 100644
View file @ 2f61998e
import Cover from './cover';
export default {
components: {
Cover
},
data() {
return {
dragOver: false
};
},
computed: {
lastestFile() {
return this.fileList[this.fileList.length - 1];
},
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file && file.status !== 'fail';
},
thumbnailMode() {
return this.$parent.thumbnailMode;
}
},
methods: {
onDrop(e) {
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
}
}
};
packages/upload/src/iframe-upload.vue
View file @ 2f61998e
...@@ -160,7 +160,7 @@ export default { ...@@ -160,7 +160,7 @@ export default {
</input> </input>
<input type="hidden" name="documentDomain" value={ this.$isServer ? '' : document.domain } /> <input type="hidden" name="documentDomain" value={ this.$isServer ? '' : document.domain } />
<span ref="data"></span> <span ref="data"></span>
</form> </form>
{!this.showCover ? this.$slots.default : cover} {!this.showCover ? this.$slots.default : cover}
</div> </div>
); );
......
packages/upload/src/index.vue
View file @ 2f61998e
...@@ -5,8 +5,7 @@ import UploadDragger from './upload-dragger'; ...@@ -5,8 +5,7 @@ import UploadDragger from './upload-dragger';
import IframeUpload from './iframe-upload'; import IframeUpload from './iframe-upload';
import ElProgress from 'element-ui/packages/progress'; import ElProgress from 'element-ui/packages/progress';
function noop() { function noop() {}
}
export default { export default {
name: 'ElUpload', name: 'ElUpload',
...@@ -79,6 +78,10 @@ export default { ...@@ -79,6 +78,10 @@ export default {
default() { default() {
return []; return [];
} }
},
autoUpload: {
type: Boolean,
default: true
} }
}, },
...@@ -96,78 +99,71 @@ export default { ...@@ -96,78 +99,71 @@ export default {
immediate: true, immediate: true,
handler(fileList) { handler(fileList) {
this.uploadFiles = fileList.map(item => { this.uploadFiles = fileList.map(item => {
if (!item.uid) { item.uid = item.uid || (Date.now() + this.tempIndex++);
item.uid = Date.now() + this.tempIndex++; item.status = 'success';
}
return item; return item;
}); });
} }
},
uploadFiles(value, oldValue) {
// console.log(value, oldValue);
} }
}, },
methods: { methods: {
handleStart(file) { handleStart(rawFile) {
file.uid = Date.now() + this.tempIndex++; rawFile.uid = Date.now() + this.tempIndex++;
let _file = { let file = {
status: 'uploading', status: 'ready',
name: file.name, name: rawFile.name,
size: file.size, size: rawFile.size,
percentage: 0, percentage: 0,
uid: file.uid, uid: rawFile.uid,
showProgress: true raw: rawFile
}; };
try { try {
_file.url = URL.createObjectURL(file); file.url = URL.createObjectURL(rawFile);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
return; return;
} }
this.uploadFiles.push(_file); this.uploadFiles.push(file);
}, },
handleProgress(ev, file) { handleProgress(ev, rawFile) {
var _file = this.getFile(file); var file = this.getFile(rawFile);
this.onProgress(ev, _file, this.uploadFiles); this.onProgress(ev, file, this.uploadFiles);
_file.percentage = ev.percent || 0; file.status = 'uploading';
file.percentage = ev.percent || 0;
}, },
handleSuccess(res, file) { handleSuccess(res, rawFile) {
var _file = this.getFile(file); var file = this.getFile(rawFile);
if (_file) { if (file) {
_file.status = 'finished'; file.status = 'success';
_file.response = res; file.response = res;
this.onSuccess(res, _file, this.uploadFiles); this.onSuccess(res, file, this.uploadFiles);
setTimeout(() => {
_file.showProgress = false;
}, 1000);
} }
}, },
handleError(err, response, file) { handleError(err, response, rawFile) {
var _file = this.getFile(file); var file = this.getFile(rawFile);
var fileList = this.uploadFiles; var fileList = this.uploadFiles;
_file.status = 'fail'; file.status = 'fail';
fileList.splice(fileList.indexOf(_file), 1); fileList.splice(fileList.indexOf(file), 1);
this.onError(err, response, file); this.onError(err, response, rawFile);
}, },
handleRemove(file) { handleRemove(file) {
var fileList = this.uploadFiles; var fileList = this.uploadFiles;
fileList.splice(fileList.indexOf(file), 1); fileList.splice(fileList.indexOf(file), 1);
this.onRemove(file, fileList); this.onRemove(file, fileList);
}, },
getFile(file) { getFile(rawFile) {
var fileList = this.uploadFiles; var fileList = this.uploadFiles;
var target; var target;
fileList.every(item => { fileList.every(item => {
target = file.uid === item.uid ? item : null; target = rawFile.uid === item.uid ? item : null;
return !target; return !target;
}); });
return target; return target;
...@@ -180,34 +176,19 @@ export default { ...@@ -180,34 +176,19 @@ export default {
clearFiles() { clearFiles() {
this.uploadFiles = []; this.uploadFiles = [];
}, },
initDraggable() { submit() {
const target = this.$el; this.uploadFiles
const _this = this; .filter(file => file.status === 'ready')
target.addEventListener('dragover', event => { .forEach(file => {
event.preventDefault(); this.$refs['upload-inner'].upload(file.raw, file);
_this.draggable = true; });
});
target.addEventListener('drop', event => {
event.preventDefault();
_this.draggable = false;
});
target.addEventListener('dragleave', event => {
event.preventDefault();
_this.draggable = false;
});
}
},
mounted() {
if (this.draggable) {
this.initDraggable();
} }
}, },
render(h) { render(h) {
var uploadList; var uploadList;
if (this.showUploadList && !this.thumbnailMode && this.uploadFiles.length) { if (this.showUploadList && this.uploadFiles.length) {
uploadList = ( uploadList = (
<UploadList <UploadList
files={this.uploadFiles} files={this.uploadFiles}
...@@ -217,7 +198,7 @@ export default { ...@@ -217,7 +198,7 @@ export default {
); );
} }
var props = { var uploadData = {
props: { props: {
type: this.type, type: this.type,
draggable: this.draggable, draggable: this.draggable,
...@@ -229,6 +210,8 @@ export default { ...@@ -229,6 +210,8 @@ export default {
name: this.name, name: this.name,
data: this.data, data: this.data,
accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept, accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
fileList: this.uploadFiles,
autoUpload: this.autoUpload,
'on-start': this.handleStart, 'on-start': this.handleStart,
'on-progress': this.handleProgress, 'on-progress': this.handleProgress,
'on-success': this.handleSuccess, 'on-success': this.handleSuccess,
...@@ -243,10 +226,10 @@ export default { ...@@ -243,10 +226,10 @@ export default {
// ? <upload {...props}>{this.$slots.default}</upload> // ? <upload {...props}>{this.$slots.default}</upload>
// : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>; // : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
if (this.dragger) { if (this.draggable) {
return ( return (
<div> <div>
<upload-dragger {...props}>{this.$slots.default}</upload-dragger> <upload {...uploadData}>{this.$slots.trigger || this.$slots.default}</upload>
{this.$slots.tip} {this.$slots.tip}
{uploadList} {uploadList}
</div> </div>
...@@ -256,7 +239,8 @@ export default { ...@@ -256,7 +239,8 @@ export default {
return ( return (
<div> <div>
{uploadList} {uploadList}
<upload {...props}>{this.$slots.default}</upload> <upload {...uploadData}>{this.$slots.trigger || this.$slots.default}</upload>
{this.$slots.default}
{this.$slots.tip} {this.$slots.tip}
</div> </div>
); );
......
packages/upload/src/upload-list.vue
View file @ 2f61998e
...@@ -2,22 +2,23 @@ ...@@ -2,22 +2,23 @@
<transition-group tag="ul" class="el-upload__files" name="list"> <transition-group tag="ul" class="el-upload__files" name="list">
<li <li
v-for="file in files" v-for="file in files"
class="el-upload__file" :class="['el-upload__file', 'is-' + file.status]"
:class="{
'is-finished': file.status === 'finished'
}"
:key="file" :key="file"
@click="$emit('clickFile', file)" @click="$emit('clickFile', file)"
> >
<a class="el-upload__file__name" @click="$emit('preview', file)"> <a class="el-upload__file__name" @click="$emit('preview', file)">
<i class="el-icon-document"></i>{{file.name}} <i class="el-icon-document"></i>{{file.name}}
</a> </a>
<span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'finished'">{{ t('el.upload.delete') }}</span> <i :class="{
'el-upload__file__icon': true,
'el-icon-circle-check': file.status === 'success',
'el-icon-circle-cross': file.status === 'fail'
}"></i>
<span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'success'">{{ t('el.upload.delete') }}</span>
<el-progress <el-progress
v-if="file.showProgress" v-if="file.status === 'uploading'"
:stroke-width="2" :stroke-width="2"
:percentage="parsePercentage(file.percentage)" :percentage="parsePercentage(file.percentage)">
:status="file.status === 'finished' && file.showProgress ? 'success' : ''">
</el-progress> </el-progress>
</li> </li>
</transition-group> </transition-group>
......
packages/upload/src/upload.vue
View file @ 2f61998e
<template>
<div class="el-upload" @click="handleClick">
<slot></slot>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script> <script>
import merge from 'element-ui/src/utils/merge';
import ajax from './ajax'; import ajax from './ajax';
import dragger from './dragger';
export default { export default {
components: { mixins: [dragger],
},
props: { props: {
type: String, type: String,
action: { action: {
...@@ -31,6 +26,7 @@ export default { ...@@ -31,6 +26,7 @@ export default {
onSuccess: Function, onSuccess: Function,
onError: Function, onError: Function,
beforeUpload: Function, beforeUpload: Function,
draggable: Boolean,
onPreview: { onPreview: {
type: Function, type: Function,
default: function() {} default: function() {}
...@@ -38,7 +34,9 @@ export default { ...@@ -38,7 +34,9 @@ export default {
onRemove: { onRemove: {
type: Function, type: Function,
default: function() {} default: function() {}
} },
fileList: Array,
autoUpload: Boolean
}, },
data() { data() {
...@@ -54,9 +52,7 @@ export default { ...@@ -54,9 +52,7 @@ export default {
handleChange(ev) { handleChange(ev) {
const files = ev.target.files; const files = ev.target.files;
if (!files) { if (!files) return;
return;
}
this.uploadFiles(files); this.uploadFiles(files);
this.$refs.input.value = null; this.$refs.input.value = null;
}, },
...@@ -66,64 +62,111 @@ export default { ...@@ -66,64 +62,111 @@ export default {
if (postFiles.length === 0) { return; } if (postFiles.length === 0) { return; }
postFiles.forEach(file => { postFiles.forEach(rawFile => {
let isImage = this.isImage(file.type); if (!this.thumbnailMode || this.isImage(rawFile.type)) {
this.onStart(rawFile);
if (this.thumbnailMode && !isImage) { if (this.autoUpload) this.upload(rawFile);
return;
} else {
this.upload(file);
} }
}); });
}, },
upload(file) { upload(rawFile, file) {
if (!this.beforeUpload) { if (!this.beforeUpload) {
return this.post(file); return this.post(rawFile);
} }
const before = this.beforeUpload(file); const before = this.beforeUpload(rawFile);
if (before && before.then) { if (before && before.then) {
before.then(processedFile => { before.then(processedFile => {
if (Object.prototype.toString.call(processedFile) === '[object File]') { if (Object.prototype.toString.call(processedFile) === '[object File]') {
this.post(processedFile); this.post(processedFile);
} else { } else {
this.post(file); this.post(rawFile);
} }
}, () => { }, () => {
// this.$emit('cancel', file); if (file) this.onRemove(file);
}); });
} else if (before !== false) { } else if (before !== false) {
this.post(file); this.post(rawFile);
} else { } else {
// this.$emit('cancel', file); if (file) this.onRemove(file);
} }
}, },
post(file) { post(rawFile) {
this.onStart(file);
let formData = new FormData();
formData.append(this.name, file);
ajax({ ajax({
headers: this.headers, headers: this.headers,
withCredentials: this.withCredentials, withCredentials: this.withCredentials,
file: file, file: rawFile,
data: this.data, data: this.data,
filename: this.name, filename: this.name,
action: this.action, action: this.action,
onProgress: e => { onProgress: e => {
this.onProgress(e, file); this.onProgress(e, rawFile);
}, },
onSuccess: res => { onSuccess: res => {
this.onSuccess(res, file); this.onSuccess(res, rawFile);
}, },
onError: (err, response) => { onError: (err, response) => {
this.onError(err, response, file); this.onError(err, response, rawFile);
} }
}); });
}, },
handleClick() { handleClick() {
this.$refs.input.click(); this.$refs.input.click();
} }
},
render(h) {
let {
handleClick,
draggable,
onDrop,
showCover,
onPreview,
onRemove,
handleChange,
multiple,
accept,
lastestFile
} = this;
const data = {
class: {
'el-upload': true
},
on: {
click: handleClick
}
};
if (draggable) {
merge(data.on, {
dragover: (ev) => {
ev.preventDefault();
this.dragOver = true;
},
dragleave: (ev) => {
ev.preventDefault();
this.dragOver = false;
},
drop: (ev) => {
ev.preventDefault();
onDrop(ev);
}
});
merge(data.class, {
'el-upload--draggable': true,
'is-dragOver': this.dragOver,
'is-showCover': this.showCover
});
}
return (
<div {...data}>
{
showCover
? <cover image={lastestFile} on-preview={onPreview} on-remove={onRemove}></cover>
: this.$slots.default
}
<input class="el-upload__input" type="file" ref="input" on-change={handleChange} multiple={multiple} accept={accept}></input>
</div>
);
} }
}; };
</script> </script>
src/index.js
View file @ 2f61998e
...@@ -109,6 +109,7 @@ const components = [ ...@@ -109,6 +109,7 @@ const components = [
Row, Row,
Col, Col,
Upload, Upload,
UploadDragger,
Progress, Progress,
Spinner, Spinner,
Badge, Badge,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment