Skip to content

E
Element
Commit ac1bebf2 authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update upload

parent 16b58dc1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3600 additions and 514 deletions
examples/assets/restaurants.json 0 → 100644
View file @ ac1bebf2
This diff is collapsed.
examples/docs/upload.md
View file @ ac1bebf2
...@@ -31,21 +31,18 @@ ...@@ -31,21 +31,18 @@
} }
</script> </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 ```html
<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove"> <el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<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 class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
methods: { methods: {
...@@ -59,27 +56,23 @@ ...@@ -59,27 +56,23 @@
} }
</script> </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 ```html
<el-upload <el-upload
action="http://element.alpha.elenet.me/upload" action="http://element.alpha.elenet.me/upload"
type="drag" type="drag"
:multiple="true" :multiple="true"
:on-preview="handlePreview" :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> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
<script> <script>
...@@ -95,23 +88,13 @@ ...@@ -95,23 +88,13 @@
} }
</script> </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 ```html
<el-upload <el-upload
action="http://element.alpha.elenet.me/upload" action="http://element.alpha.elenet.me/upload"
...@@ -120,6 +103,8 @@ ...@@ -120,6 +103,8 @@
:on-preview="handlePreview" :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> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
<script> <script>
...@@ -135,20 +120,22 @@ ...@@ -135,20 +120,22 @@
} }
</script> </script>
``` ```
:::
### Upload Attribute
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | | | | action | 必选参数, 上传的地址 | string | - | — |
| headers | 可选参数, 设置上传的请求头部 | object | | | | headers | 可选参数, 设置上传的请求头部 | object | — | — |
| multiple | 可选参数, 是否支持多选文件 | boolean | | | | multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
| file | 可选参数, 上传的文件字段名 | string | | file | | file | 可选参数, 上传的文件字段名 | string | — | file |
| withCredentials | 支持发送 cooking 凭证信息 | boolean | | false | | with-credentials | 支持发送 cooking 凭证信息 | boolean | — | false |
| showUploadList | 是否显示已上传文件列表 | boolean | | true | | show-uploadList | 是否显示已上传文件列表 | boolean | — | true |
| type | 上传控件类型 | string | select,drag | select | | type | 上传控件类型 | string | select,drag | select |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | | | | accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | — | — |
| onPreview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | | | | on-preview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | — | — |
| onRemove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | | | | on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
| beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | | | | before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
| thumbnailMode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | | false | | thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
| type | 上传控件类型 | string | select,drag | select | | type | 上传控件类型 | string | select,drag | select |
examples/icon.json
View file @ ac1bebf2
["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"] ["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 \ No newline at end of file
packages/theme-default/src/fonts/element-icons.svg 100755 → 100644
View file @ ac1bebf2
This diff is collapsed.
packages/theme-default/src/fonts/element-icons.ttf 100755 → 100644
View file @ ac1bebf2
No preview for this file type
packages/theme-default/src/fonts/element-icons.woff 100755 → 100644
View file @ ac1bebf2
No preview for this file type
packages/theme-default/src/icon.css
View file @ ac1bebf2
@font-face { @font-face {
font-family: 'element-icons'; font-family: 'element-icons';
src: src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/
url('fonts/element-icons.ttf?ld8k1a') format('truetype'), url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
url('fonts/element-icons.woff?ld8k1a') format('woff'), url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg'); url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
...@@ -25,114 +25,45 @@ ...@@ -25,114 +25,45 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.el-icon-search:before { .el-icon-arrow-down:before { content: "\e600"; }
content: "\e90e"; .el-icon-arrow-left:before { content: "\e601"; }
} .el-icon-arrow-right:before { content: "\e602"; }
.el-icon-share:before { .el-icon-arrow-up:before { content: "\e603"; }
content: "\e900"; .el-icon-caret-bottom:before { content: "\e604"; }
} .el-icon-caret-left:before { content: "\e605"; }
.el-icon-setting:before { .el-icon-caret-right:before { content: "\e606"; }
content: "\e901"; .el-icon-caret-top:before { content: "\e607"; }
} .el-icon-check:before { content: "\e608"; }
.el-icon-circle-cross:before { .el-icon-circle-check:before { content: "\e609"; }
content: "\e902"; .el-icon-circle-close:before { content: "\e60a"; }
} .el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-warning:before { .el-icon-close:before { content: "\e60c"; }
content: "\e903"; .el-icon-cloud:before { content: "\e60d"; }
} .el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-information:before { .el-icon-d-arrow-right:before { content: "\e60f"; }
content: "\e904"; .el-icon-d-caret:before { content: "\e610"; }
} .el-icon-date:before { content: "\e611"; }
.el-icon-circle-check:before { .el-icon-delete:before { content: "\e612"; }
content: "\e905"; .el-icon-document:before { content: "\e613"; }
} .el-icon-edit:before { content: "\e614"; }
.el-icon-delete:before { .el-icon-information:before { content: "\e615"; }
content: "\e906"; .el-icon-loading:before { content: "\e616"; }
} .el-icon-menu:before { content: "\e617"; }
.el-icon-d-arrow-left:before { .el-icon-message:before { content: "\e618"; }
content: "\e907"; .el-icon-minus:before { content: "\e619"; }
} .el-icon-more:before { content: "\e61a"; }
.el-icon-d-arrow-right:before { .el-icon-picture:before { content: "\e61b"; }
content: "\e908"; .el-icon-plus:before { content: "\e61c"; }
} .el-icon-search:before { content: "\e61d"; }
.el-icon-picture:before { .el-icon-setting:before { content: "\e61e"; }
content: "\e909"; .el-icon-share:before { content: "\e61f"; }
} .el-icon-star-off:before { content: "\e620"; }
.el-icon-upload:before { .el-icon-star-on:before { content: "\e621"; }
content: "\e90a"; .el-icon-time:before { content: "\e622"; }
} .el-icon-warning:before { content: "\e623"; }
.el-icon-menu:before { .el-icon-delete2:before { content: "\e624"; }
content: "\e90b"; .el-icon-upload:before { content: "\e625"; }
} .el-icon-view:before { content: "\e626"; }
.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-loading { .el-icon-loading {
animation: rotating 1s linear infinite; animation: rotating 1s linear infinite;
......
packages/theme-default/src/upload.css
View file @ ac1bebf2
...@@ -11,6 +11,16 @@ ...@@ -11,6 +11,16 @@
} }
@e inner { @e inner {
display: inline-block; display: inline-block;
position: relative;
& iframe {
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
} }
@e files { @e files {
margin: 0; margin: 0;
...@@ -103,7 +113,7 @@ ...@@ -103,7 +113,7 @@
display: block; display: block;
height: 100%; height: 100%;
} }
& .el-icon-upload { & .el-icon-cloud {
font-size: 67px; font-size: 67px;
color: #99a9bf; color: #99a9bf;
margin: 40px 0 16px; margin: 40px 0 16px;
...@@ -119,16 +129,7 @@ ...@@ -119,16 +129,7 @@
border-top: 1px solid rgba(#c0ccda, .2); border-top: 1px solid rgba(#c0ccda, .2);
} }
@e progress { @e cover {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e uploaded-image {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -144,6 +145,15 @@ ...@@ -144,6 +145,15 @@
height: auto; height: auto;
} }
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e interact { @e interact {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -230,7 +240,7 @@ ...@@ -230,7 +240,7 @@
} }
} }
&:not(.is-showImage):hover { &:not(.is-showCover):hover {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
......
packages/upload/src/ajax-upload.vue deleted 100644 → 0
View file @ 16b58dc1
<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 @ ac1bebf2
<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 @ ac1bebf2
<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> <script>
import ajax from './ajax'; import Cover from './cover';
import ElProgress from 'packages/progress/index.js';
export default { export default {
components: { 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() { data() {
return { return {
uploading: false, dragOver: false,
percentage: 0, mouseover: false,
uploadedFiles: [], domain: '',
filename: '', file: null,
success: false, disabled: false
iframeStyle: {
position: 'absolute',
top: 0,
opacity: 0,
filter: 'alpha(opacity=0)',
left: 0,
zIndex: 9999
}
}; };
}, },
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: { methods: {
handleChange(ev) { resetIframe() {
const files = ev.target.files; const iframeNode = this.getIframeNode();
let win = iframeNode.contentWindow;
let doc = win.document;
if (this.uploading || !files) { doc.open('text/html', 'replace');
return; doc.write(this.getIframeHTML(this.domain));
doc.close();
},
getIframeHTML(domain) {
let domainScript = '';
if (domain) {
domainScript = `<script>document.domain="${domain}";<` + '/script>';
} }
return `
this.uploading = true; <!DOCTYPE html>
this.uploadFiles(files); <html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
${domainScript}
</head>
<body>
</body>
</html>
`;
},
isImage(str) {
return str.indexOf('image') !== -1;
}, },
uploadFiles(files) { handleClick() {
let postFiles = Array.prototype.slice.call(files); if (!this.disabled) {
if (!this.multiple) { this.$refs.input.click();
postFiles = postFiles.slice(0, 1);
} }
const len = postFiles.length; },
if (len > 0) { handleChange(ev) {
for (let i = 0; i < len; i++) { const files = ev.target.files;
const file = postFiles[i]; this.file = files;
// file.uid = uid();
this.upload(file); this.onStart(files);
const formNode = this.getFormNode();
const dataSpan = this.getFormDataNode();
let data = this.data;
if (typeof data === 'function') {
data = data(files);
} }
if (this.multiple) { const inputs = [];
this.onStart(postFiles); for (const key in data) {
} else { if (data.hasOwnProperty(key)) {
this.onStart(postFiles[0]); inputs.push(`<input name="${key}" value="${data[key]}"/>`);
} }
} }
dataSpan.innerHTML = inputs.join('');
formNode.submit();
dataSpan.innerHTML = '';
this.disabled = true;
}, },
upload(file) { onLoad() {
if (!this.beforeUpload) { let response;
return this.post(file); const eventFile = this.file;
} if (!eventFile) { return; }
try {
const before = this.beforeUpload(file); const doc = this.getIframeDocument();
if (before && before.then) { const script = doc.getElementsByTagName('script')[0];
before.then((processedFile) => { if (script && script.parentNode === doc.body) {
if (Object.prototype.toString.call(processedFile) === '[object File]') { doc.body.removeChild(script);
this.post(processedFile);
} else {
this.post(file);
} }
}, () => { response = doc.body.innerHTML;
this.reset(); this.onSuccess(response, eventFile);
}); } catch (err) {
} else if (before !== false) { console.log(err);
this.post(file); console.warn(false, 'cross domain error for Upload');
} else { this.onError(err, eventFile);
this.reset();
} }
this.resetIframe();
this.disabled = false;
}, },
post(file) { onDrop(e) {
let formData = new FormData(); e.preventDefault();
formData.append(this.name, file); this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
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);
}
});
}, },
onLoad() { handleDragover(e) {
e.preventDefault();
this.onDrop = true;
}, },
onStart(files) { handleDragleave(e) {
this.filename = files.name; e.preventDefault();
this.onDrop = false;
}, },
onProgress(ev, file) { getIframeNode() {
console.log(ev.percent); return this.$refs.iframe;
this.percentage = ev.percent;
}, },
onSuccess(res, file) {
setTimeout(() => { getIframeDocument() {
this.uploadedFiles.push(file); return this.getIframeNode().contentDocument;
this.reset();
}, 1000);
console.log(res);
}, },
onError(err, file) {
this.reset(); getFormNode() {
console.log(err); return this.$refs.form;
}, },
reset() {
this.uploading = false; getFormDataNode() {
this.percent = 0; return this.$refs.data;
this.filename = '';
} }
}, },
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> </script>
packages/upload/src/index.vue
View file @ ac1bebf2
<script> <script>
import UploadList from './upload-list'; import UploadList from './upload-list';
import Upload from './upload'; import Upload from './upload';
import IframeUpload from './iframe-upload';
import ElProgress from 'packages/progress/index.js'; import ElProgress from 'packages/progress/index.js';
function noop() { function noop() {
...@@ -9,13 +10,11 @@ function noop() { ...@@ -9,13 +10,11 @@ function noop() {
export default { export default {
name: 'el-upload', name: 'el-upload',
// extends: typeof FormData !== 'undefined' ? ajaxUpload : iframeUpload,
// extends: iframeUpload,
components: { components: {
ElProgress, ElProgress,
UploadList, UploadList,
Upload Upload,
IframeUpload
}, },
props: { props: {
...@@ -108,12 +107,14 @@ export default { ...@@ -108,12 +107,14 @@ export default {
onSuccess(res, file) { onSuccess(res, file) {
var _file = this.getFile(file); var _file = this.getFile(file);
if (_file) {
_file.status = 'finished'; _file.status = 'finished';
_file.response = res; _file.response = res;
setTimeout(() => { setTimeout(() => {
_file.showProgress = false; _file.showProgress = false;
}, 1000); }, 1000);
}
}, },
onError(err, file) { onError(err, file) {
var _file = this.getFile(file); var _file = this.getFile(file);
...@@ -147,6 +148,7 @@ export default { ...@@ -147,6 +148,7 @@ export default {
render(h) { render(h) {
var uploadList; var uploadList;
if (this.showUploadList && !this.thumbnailMode) { if (this.showUploadList && !this.thumbnailMode) {
uploadList = ( uploadList = (
<UploadList <UploadList
...@@ -159,6 +161,7 @@ export default { ...@@ -159,6 +161,7 @@ export default {
var props = { var props = {
props: { props: {
type: this.type,
action: this.action, action: this.action,
multiple: this.multiple, multiple: this.multiple,
'before-upload': this.beforeUpload, 'before-upload': this.beforeUpload,
...@@ -174,26 +177,24 @@ export default { ...@@ -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') { if (this.type === 'select') {
return ( return (
<div class="el-upload"> <div class="el-upload">
{uploadList} {uploadList}
<upload {...props}> {uploadComponent}
{this.$slots.default}
</upload>
{this.$slots.tip} {this.$slots.tip}
</div> </div>
); );
} }
if (this.type === 'drag') { if (this.type === 'drag') {
props.props.type = 'drag';
return ( return (
<div class="el-upload"> <div class="el-upload">
<upload {...props}> {uploadComponent}
{this.$slots.default}
</upload>
{this.$slots.tip} {this.$slots.tip}
{uploadList} {uploadList}
</div> </div>
......
packages/upload/src/upload.vue
View file @ ac1bebf2
...@@ -3,55 +3,27 @@ ...@@ -3,55 +3,27 @@
:class="{ :class="{
'el-dragger': type === 'drag', 'el-dragger': type === 'drag',
'is-dragOver': dragOver, 'is-dragOver': dragOver,
'is-hover': mouseover, 'is-showCover': showCover
'is-showImage': showThumbnail
}" }"
@click="$refs.input.click()" @click="$refs.input.click()"
@drop.prevent="onDrop" @drop.prevent="onDrop"
@dragover.prevent="dragOver = true" @dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false" @dragleave.prevent="dragOver = false"
@mouseenter="mouseover = true"
@mouseleave="mouseover = false"
> >
<slot></slot> <slot v-if="!showCover"></slot>
<template v-if="type === 'drag' && !showThumbnail"> <cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
<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>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept"> <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div> </div>
</template> </template>
<script> <script>
import ajax from './ajax'; import ajax from './ajax';
import Cover from './cover';
export default { export default {
components: {
Cover
},
props: { props: {
type: String, type: String,
action: { action: {
...@@ -90,11 +62,11 @@ export default { ...@@ -90,11 +62,11 @@ export default {
computed: { computed: {
lastestFile() { lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles; var uploadedFiles = this.$parent.uploadedFiles;
return uploadedFiles.length > 0 ? uploadedFiles[uploadedFiles.length - 1] : {}; return uploadedFiles[uploadedFiles.length - 1];
}, },
showThumbnail() { showCover() {
var file = this.lastestFile; var file = this.lastestFile;
return this.thumbnailMode && file.status && file.status !== 'fail'; return this.thumbnailMode && file && file.status !== 'fail';
}, },
thumbnailMode() { thumbnailMode() {
return this.$parent.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