Skip to content

E
Element
Commit c61c1472 authored by baiyaaaaa's avatar baiyaaaaa Committed by GitHub
Browse files
Options

Merge pull request #117 from eleme/feat/upload 

update upload
parents 72605031 ac1bebf2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3600 additions and 514 deletions
examples/assets/restaurants.json 0 → 100644
View file @ c61c1472
This diff is collapsed.
examples/docs/upload.md
View file @ c61c1472
......@@ -31,21 +31,18 @@
}
</script>
## 基础使用
## Upload 上传
<div class="demo-box">
<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
通过点击或者拖拽上传文件
### 点击上传多个文件
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html
<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
methods: {
......@@ -59,27 +56,23 @@
}
</script>
```
:::
## 拖拽文件上传
### 拖拽上传
<div class="demo-box">
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
可将文件拖入指定区域进行上传。
::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
```html
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove">
:on-remove="handleRemove"
>
<i class="el-icon-cloud"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
......@@ -95,23 +88,13 @@
}
</script>
```
:::
## 图片缩略图模式
上传文件类型限制为只能上传图片，并可展示本地缩略图，该模式暂不支持多选
### 上传单个图片
<div class="demo-box">
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
专门针对图片类型文件的上传，上传后在原位置显示缩略图。
::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
```html
<el-upload
action="http://element.alpha.elenet.me/upload"
......@@ -120,6 +103,8 @@
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<i class="el-icon-cloud"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
......@@ -135,20 +120,22 @@
}
</script>
```
:::
### Upload Attribute
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | | |
| headers | 可选参数, 设置上传的请求头部 | object | | |
| multiple | 可选参数, 是否支持多选文件 | boolean | | |
| file | 可选参数, 上传的文件字段名 | string | | file |
| withCredentials | 支持发送 cooking 凭证信息 | boolean | | false |
| showUploadList | 是否显示已上传文件列表 | boolean | | true |
| action | 必选参数, 上传的地址 | string | - | — |
| headers | 可选参数, 设置上传的请求头部 | object | — | — |
| multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
| file | 可选参数, 上传的文件字段名 | string | — | file |
| with-credentials | 支持发送 cooking 凭证信息 | boolean | — | false |
| show-uploadList | 是否显示已上传文件列表 | boolean | — | true |
| type | 上传控件类型 | string | select,drag | select |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | | |
| onPreview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | | |
| onRemove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | | |
| beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | | |
| thumbnailMode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | | false |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | — | — |
| on-preview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | — | — |
| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
| before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
| thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
| type | 上传控件类型 | string | select,drag | select |
examples/icon.json
View file @ c61c1472
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"]
\ No newline at end of file
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","cloud","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload","view"]
\ No newline at end of file
packages/theme-default/src/fonts/element-icons.svg 100755 → 100644
View file @ c61c1472
This diff is collapsed.
packages/theme-default/src/fonts/element-icons.ttf 100755 → 100644
View file @ c61c1472
No preview for this file type
packages/theme-default/src/fonts/element-icons.woff 100755 → 100644
View file @ c61c1472
No preview for this file type
packages/theme-default/src/icon.css
View file @ c61c1472
@font-face {
font-family: 'element-icons';
src:
url('fonts/element-icons.ttf?ld8k1a') format('truetype'),
url('fonts/element-icons.woff?ld8k1a') format('woff'),
url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg');
src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/
url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
......@@ -25,114 +25,45 @@
-moz-osx-font-smoothing: grayscale;
}
.el-icon-search:before {
content: "\e90e";
}
.el-icon-share:before {
content: "\e900";
}
.el-icon-setting:before {
content: "\e901";
}
.el-icon-circle-cross:before {
content: "\e902";
}
.el-icon-warning:before {
content: "\e903";
}
.el-icon-information:before {
content: "\e904";
}
.el-icon-circle-check:before {
content: "\e905";
}
.el-icon-delete:before {
content: "\e906";
}
.el-icon-d-arrow-left:before {
content: "\e907";
}
.el-icon-d-arrow-right:before {
content: "\e908";
}
.el-icon-picture:before {
content: "\e909";
}
.el-icon-upload:before {
content: "\e90a";
}
.el-icon-menu:before {
content: "\e90b";
}
.el-icon-time:before {
content: "\e90c";
}
.el-icon-circle-close:before {
content: "\e90d";
}
.el-icon-arrow-down:before {
content: "\e90f";
}
.el-icon-arrow-up:before {
content: "\e910";
}
.el-icon-arrow-right:before {
content: "\e911";
}
.el-icon-arrow-left:before {
content: "\e912";
}
.el-icon-close:before {
content: "\e913";
}
.el-icon-document:before {
content: "\e914";
}
.el-icon-d-caret:before {
content: "\e915";
}
.el-icon-date:before {
content: "\e916";
}
.el-icon-message:before {
content: "\e917";
}
.el-icon-loading:before {
content: "\e918";
}
.el-icon-ellipsis:before {
content: "\e919";
}
.el-icon-plus:before {
content: "\e91a";
}
.el-icon-caret-left:before {
content: "\e91b";
}
.el-icon-caret-right:before {
content: "\e91c";
}
.el-icon-caret-bottom:before {
content: "\e91d";
}
.el-icon-edit:before {
content: "\e91e";
}
.el-icon-caret-top:before {
content: "\e91f";
}
.el-icon-check:before {
content: "\e920";
}
.el-icon-minus:before {
content: "\e921";
}
.el-icon-star-off:before {
content: "\e922";
}
.el-icon-star-on:before {
content: "\e923";
}
.el-icon-arrow-down:before { content: "\e600"; }
.el-icon-arrow-left:before { content: "\e601"; }
.el-icon-arrow-right:before { content: "\e602"; }
.el-icon-arrow-up:before { content: "\e603"; }
.el-icon-caret-bottom:before { content: "\e604"; }
.el-icon-caret-left:before { content: "\e605"; }
.el-icon-caret-right:before { content: "\e606"; }
.el-icon-caret-top:before { content: "\e607"; }
.el-icon-check:before { content: "\e608"; }
.el-icon-circle-check:before { content: "\e609"; }
.el-icon-circle-close:before { content: "\e60a"; }
.el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-close:before { content: "\e60c"; }
.el-icon-cloud:before { content: "\e60d"; }
.el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-d-arrow-right:before { content: "\e60f"; }
.el-icon-d-caret:before { content: "\e610"; }
.el-icon-date:before { content: "\e611"; }
.el-icon-delete:before { content: "\e612"; }
.el-icon-document:before { content: "\e613"; }
.el-icon-edit:before { content: "\e614"; }
.el-icon-information:before { content: "\e615"; }
.el-icon-loading:before { content: "\e616"; }
.el-icon-menu:before { content: "\e617"; }
.el-icon-message:before { content: "\e618"; }
.el-icon-minus:before { content: "\e619"; }
.el-icon-more:before { content: "\e61a"; }
.el-icon-picture:before { content: "\e61b"; }
.el-icon-plus:before { content: "\e61c"; }
.el-icon-search:before { content: "\e61d"; }
.el-icon-setting:before { content: "\e61e"; }
.el-icon-share:before { content: "\e61f"; }
.el-icon-star-off:before { content: "\e620"; }
.el-icon-star-on:before { content: "\e621"; }
.el-icon-time:before { content: "\e622"; }
.el-icon-warning:before { content: "\e623"; }
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload:before { content: "\e625"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-loading {
animation: rotating 1s linear infinite;
......
packages/theme-default/src/upload.css
View file @ c61c1472
......@@ -11,6 +11,16 @@
}
@e inner {
display: inline-block;
position: relative;
& iframe {
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
}
@e files {
margin: 0;
......@@ -103,7 +113,7 @@
display: block;
height: 100%;
}
& .el-icon-upload {
& .el-icon-cloud {
font-size: 67px;
color: #99a9bf;
margin: 40px 0 16px;
......@@ -119,16 +129,7 @@
border-top: 1px solid rgba(#c0ccda, .2);
}
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e uploaded-image {
@e cover {
position: absolute;
left: 0;
top: 0;
......@@ -144,6 +145,15 @@
height: auto;
}
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e interact {
position: absolute;
bottom: 0;
......@@ -230,7 +240,7 @@
}
}
&:not(.is-showImage):hover {
&:not(.is-showCover):hover {
border-color: var(--color-primary);
}
......
packages/upload/src/ajax-upload.vue deleted 100644 → 0
View file @ 72605031
<template>
<div class="el-upload__inner"
@click="$els.input.click();"
@drop.prevent="onDrop"
@dragOver.prevent
>
<slot></slot>
<template v-if="$parent.type === 'drag'">
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
</template>
<input class="el-upload__input" type="file" v-el:input @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script>
import ajax from './ajax';
export default {
props: {
action: {
type: String,
required: true
},
name: {
type: String,
default: 'file'
},
withCredentials: true,
multiple: Boolean,
accept: String,
onStart: Function,
onProgress: Function,
onSuccess: Function,
onError: Function,
beforeUpload: Function
},
data() {
return {
};
},
computed: {
uploading: {
get() {
return this.$parent.uploading;
},
set(value) {
this.$parent.uploading = value;
}
},
mode() {
return this.$parent.mode;
}
},
methods: {
isImage(str) {
return str.indexOf('image') !== -1;
},
handleChange(ev) {
const files = ev.target.files;
if (this.uploading || !files) {
return;
}
this.$dispatch('filechange', files, this.$parent.uploadedFiles, ev);
this.uploading = true;
this.uploadFiles(files);
},
uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files);
if (!this.multiple) {
postFiles = postFiles.slice(0, 1);
}
const len = postFiles.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
const file = postFiles[i];
let isImage = this.isImage(file.type);
// file.uid = uid();
if (this.mode === 'image' && !isImage) {
continue;
}
this.upload(file);
}
this.onStart(postFiles);
}
},
upload(file) {
if (!this.beforeUpload) {
return this.post(file);
}
const before = this.beforeUpload(file);
if (before && before.then) {
before.then((processedFile) => {
if (Object.prototype.toString.call(processedFile) === '[object File]') {
this.post(processedFile);
} else {
this.post(file);
}
}, () => {
this.reset();
});
} else if (before !== false) {
this.post(file);
} else {
this.reset();
}
},
post(file) {
let formData = new FormData();
formData.append(this.name, file);
ajax(this.action, {
headers: this.headers,
withCredentials: this.withCredentials,
file: file,
filename: this.name,
onProgress: e => {
this.onProgress(e, file);
},
onSuccess: res => {
this.onSuccess(res, file);
},
onError: err => {
this.onError(err, file);
}
});
},
onDrop(e) {
const files = e.dataTransfer.files;
this.uploadFiles(files);
}
},
ready() {
}
};
</script>
packages/upload/src/cover.vue 0 → 100644
View file @ c61c1472
<template>
<div class="el-dragger__cover" @click.stop v-if="image">
<transition name="fade-in">
<el-progress
class="el-dragger__cover__progress"
v-if="image.status === 'loading'"
size="large"
:percentage="image.percentage"
:type="image.status === 'finished' ? 'green' : 'blue'">
</el-progress>
</transition>
<div v-if="image.status === 'finished'" @mouseenter="mouseover = true" @mouseleave="mouseover = false">
<img :src="image.url">
<transition name="fade-in">
<div v-show="mouseover" class="el-dragger__cover__interact">
<div class="el-draggeer__cover__btns">
<span class="btn" @click="$parent.$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
<span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
<span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
</div>
</div>
</transition>
<transition name="md-fade-top">
<h4 v-show="mouseover" class="el-dragger__cover__title">{{image.name}}</h4>
</transition>
</div>
</div>
</template>
<script>
export default {
props: {
image: {},
onPreview: {
type: Function,
default: function() {}
},
onRemove: {
type: Function,
default: function() {}
}
},
data() {
return {
mouseover: false
};
}
};
</script>
packages/upload/src/iframe-upload.vue
View file @ c61c1472
<template>
<span class="el-upload__inner" :style="{ position: 'relative', zIndex: 0 }">
<iframe v-el:iframe @load="onLoad" v-bind:style="iframeStyle"></iframe>
<slot></slot>
</span>
</template>
<script>
import ajax from './ajax';
import ElProgress from 'packages/progress/index.js';
import Cover from './cover';
export default {
components: {
ElProgress
Cover
},
props: {
type: String,
data: {},
action: {
type: String,
required: true
},
name: {
type: String,
default: 'file'
},
withCredentials: Boolean,
multiple: Boolean,
accept: String,
onStart: Function,
onProgress: Function,
onSuccess: Function,
onError: Function,
beforeUpload: Function,
onPreview: {
type: Function,
default: function() {}
},
onRemove: {
type: Function,
default: function() {}
}
},
data() {
return {
uploading: false,
percentage: 0,
uploadedFiles: [],
filename: '',
success: false,
iframeStyle: {
position: 'absolute',
top: 0,
opacity: 0,
filter: 'alpha(opacity=0)',
left: 0,
zIndex: 9999
}
dragOver: false,
mouseover: false,
domain: '',
file: null,
disabled: false
};
},
computed: {
lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles;
return uploadedFiles[uploadedFiles.length - 1];
},
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file && file.status !== 'fail';
},
thumbnailMode() {
return this.$parent.thumbnailMode;
}
},
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;
},
handleClick() {
if (!this.disabled) {
this.$refs.input.click();
}
},
handleChange(ev) {
const files = ev.target.files;
this.file = files;
if (this.uploading || !files) {
return;
}
this.onStart(files);
this.uploading = true;
this.uploadFiles(files);
},
uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files);
if (!this.multiple) {
postFiles = postFiles.slice(0, 1);
const formNode = this.getFormNode();
const dataSpan = this.getFormDataNode();
let data = this.data;
if (typeof data === 'function') {
data = data(files);
}
const len = postFiles.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
const file = postFiles[i];
// file.uid = uid();
this.upload(file);
}
if (this.multiple) {
this.onStart(postFiles);
} else {
this.onStart(postFiles[0]);
const inputs = [];
for (const key in data) {
if (data.hasOwnProperty(key)) {
inputs.push(`<input name="${key}" value="${data[key]}"/>`);
}
}
dataSpan.innerHTML = inputs.join('');
formNode.submit();
dataSpan.innerHTML = '';
this.disabled = true;
},
upload(file) {
if (!this.beforeUpload) {
return this.post(file);
}
const before = this.beforeUpload(file);
if (before && before.then) {
before.then((processedFile) => {
if (Object.prototype.toString.call(processedFile) === '[object File]') {
this.post(processedFile);
} else {
this.post(file);
}
}, () => {
this.reset();
});
} else if (before !== false) {
this.post(file);
} else {
this.reset();
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;
},
post(file) {
let formData = new FormData();
formData.append(this.name, file);
ajax(this.action, {
headers: this.headers,
withCredentials: this.withCredentials,
file: file,
filename: this.name,
onProgress: e => {
this.onProgress(e, file);
},
onSuccess: res => {
this.onSuccess(res, file);
},
onError: err => {
this.onError(err, file);
}
});
onDrop(e) {
e.preventDefault();
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
},
onLoad() {
handleDragover(e) {
e.preventDefault();
this.onDrop = true;
},
onStart(files) {
this.filename = files.name;
handleDragleave(e) {
e.preventDefault();
this.onDrop = false;
},
onProgress(ev, file) {
console.log(ev.percent);
this.percentage = ev.percent;
getIframeNode() {
return this.$refs.iframe;
},
onSuccess(res, file) {
setTimeout(() => {
this.uploadedFiles.push(file);
this.reset();
}, 1000);
console.log(res);
getIframeDocument() {
return this.getIframeNode().contentDocument;
},
onError(err, file) {
this.reset();
console.log(err);
getFormNode() {
return this.$refs.form;
},
reset() {
this.uploading = false;
this.percent = 0;
this.filename = '';
getFormDataNode() {
return this.$refs.data;
}
},
ready() {
render(h) {
var cover = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>;
var frameName = 'frame-' + Date.now();
return (
<div
class={{
'el-upload__inner': true,
'el-dragger': this.type === 'drag',
'is-dragOver': this.dragOver,
'is-showCover': this.showCover
}}
on-click={this.handleClick}
nativeOn-drop={this.onDrop}
nativeOn-dragover={this.handleDragover}
nativeOn-dragleave={this.handleDragleave}
>
<iframe
ref="iframe"
on-load={this.onLoad}
name={frameName}
>
</iframe>
<form ref="form" action={this.action} target={frameName} enctype="multipart/form-data" method="POST">
<input
class="el-upload__input"
type="file"
ref="input"
name="file"
on-change={this.handleChange}
multiple={this.multiple}
accept={this.accept}>
</input>
<input type="hidden" name="documentDomain" value={document.domain} />
<span ref="data"></span>
</form>
{!this.showCover ? this.$slots.default : cover}
</div>
);
}
};
</script>
packages/upload/src/index.vue
View file @ c61c1472
<script>
import UploadList from './upload-list';
import Upload from './upload';
import IframeUpload from './iframe-upload';
import ElProgress from 'packages/progress/index.js';
function noop() {
......@@ -9,13 +10,11 @@ function noop() {
export default {
name: 'el-upload',
// extends: typeof FormData !== 'undefined' ? ajaxUpload : iframeUpload,
// extends: iframeUpload,
components: {
ElProgress,
UploadList,
Upload
Upload,
IframeUpload
},
props: {
......@@ -108,12 +107,14 @@ export default {
onSuccess(res, file) {
var _file = this.getFile(file);
_file.status = 'finished';
_file.response = res;
if (_file) {
_file.status = 'finished';
_file.response = res;
setTimeout(() => {
_file.showProgress = false;
}, 1000);
setTimeout(() => {
_file.showProgress = false;
}, 1000);
}
},
onError(err, file) {
var _file = this.getFile(file);
......@@ -147,6 +148,7 @@ export default {
render(h) {
var uploadList;
if (this.showUploadList && !this.thumbnailMode) {
uploadList = (
<UploadList
......@@ -159,6 +161,7 @@ export default {
var props = {
props: {
type: this.type,
action: this.action,
multiple: this.multiple,
'before-upload': this.beforeUpload,
......@@ -174,26 +177,24 @@ export default {
}
};
var uploadComponent = typeof FormData === 'undefined'
? <upload {...props}>{this.$slots.default}</upload>
: <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
if (this.type === 'select') {
return (
<div class="el-upload">
{uploadList}
<upload {...props}>
{this.$slots.default}
</upload>
{uploadComponent}
{this.$slots.tip}
</div>
);
}
if (this.type === 'drag') {
props.props.type = 'drag';
return (
<div class="el-upload">
<upload {...props}>
{this.$slots.default}
</upload>
{uploadComponent}
{this.$slots.tip}
{uploadList}
</div>
......
packages/upload/src/upload.vue
View file @ c61c1472
......@@ -3,55 +3,27 @@
:class="{
'el-dragger': type === 'drag',
'is-dragOver': dragOver,
'is-hover': mouseover,
'is-showImage': showThumbnail
'is-showCover': showCover
}"
@click="$refs.input.click()"
@drop.prevent="onDrop"
@dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false"
@mouseenter="mouseover = true"
@mouseleave="mouseover = false"
>
<slot></slot>
<template v-if="type === 'drag' && !showThumbnail">
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
</template>
<template v-if="thumbnailMode">
<transition name="fade-in">
<el-progress
class="el-dragger__progress"
v-if="lastestFile.showProgress"
size="large"
:percentage="lastestFile.percentage"
:type="lastestFile.status === 'finished' ? 'green' : 'blue'">
</el-progress>
</transition>
<div class="el-dragger__uploaded-image" v-if="lastestFile.status === 'finished'" @click.stop>
<img :src="lastestFile.url">
<transition name="fade-in">
<div v-show="mouseover" class="el-dragger__uploaded-image__interact">
<div class="el-draggeer__uploaded-image__btns">
<span class="btn" @click="$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
<span class="btn" @click="onPreview(lastestFile)"><i class="el-icon-search"></i><span>查看图片</span></span>
<span class="btn" @click="onRemove(lastestFile)"><i class="el-icon-delete"></i><span>删除</span></span>
</div>
</div>
</transition>
<transition name="md-fade-top">
<h4 v-show="mouseover" class="el-dragger__uploaded-image__title">{{lastestFile.name}}</h4>
</transition>
</div>
</template>
<slot v-if="!showCover"></slot>
<cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script>
import ajax from './ajax';
import Cover from './cover';
export default {
components: {
Cover
},
props: {
type: String,
action: {
......@@ -90,11 +62,11 @@ export default {
computed: {
lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles;
return uploadedFiles.length > 0 ? uploadedFiles[uploadedFiles.length - 1] : {};
return uploadedFiles[uploadedFiles.length - 1];
},
showThumbnail() {
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file.status && file.status !== 'fail';
return this.thumbnailMode && file && file.status !== 'fail';
},
thumbnailMode() {
return this.$parent.thumbnailMode;
......
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