2017-05-18 12:28:45 +08:00
< style >
.upload-tip {
color: #8492a6 ;
font-size: 12px;
margin-top: 7px;
}
.demo-box {
margin-bottom: 24px;
.upload-demo {
width: 360px;
}
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9 ;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
2017-11-01 14:48:23 +08:00
& :hover, & :focus {
2017-10-01 20:16:16 +08:00
border-color: #409EFF ;
2017-05-18 12:28:45 +08:00
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d ;
width: 178px;
2019-02-26 16:23:26 +08:00
height: 178px;
line-height: 178px;
2017-05-18 12:28:45 +08:00
text-align: center;
}
.avatar {
width: 178px;
2019-02-26 16:23:26 +08:00
height: 178px;
2017-05-18 12:28:45 +08:00
display: block;
}
}
}
< / style >
2016-11-13 22:00:55 +08:00
< script >
export default {
2016-11-27 14:31:33 +08:00
data() {
return {
2017-02-15 00:59:17 +08:00
fileList: [{
name: 'food.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-15 00:59:17 +08:00
}, {
name: 'food2.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-15 00:59:17 +08:00
}],
2017-02-20 11:34:59 +08:00
fileList2: [{
name: 'food.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}, {
name: 'food2.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}],
fileList3: [{
name: 'food.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}, {
name: 'food2.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}],
imageUrl: '',
dialogImageUrl: '',
dialogVisible: false
2016-11-27 14:31:33 +08:00
};
},
2016-11-13 22:00:55 +08:00
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
beforeUpload(file) {
if (file.size > 40000000) {
console.warn(file.name + ' is too large!');
return false;
}
return true;
},
handlePreview(file) {
console.log(file);
},
2017-02-20 11:34:59 +08:00
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
2017-02-15 00:59:17 +08:00
submitUpload() {
this.$refs.upload.submit();
2016-11-13 22:00:55 +08:00
},
2017-03-20 12:45:00 +08:00
handleAvatarSuccess(res, file) {
2017-02-15 00:59:17 +08:00
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2 ;
if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!');
}
if (!isLt2M) {
this.$message.error('Avatar picture size can not exceed 2MB!');
}
return isJPG & & isLt2M;
2017-02-20 11:34:59 +08:00
},
handleChange(file, fileList) {
this.fileList3 = fileList.slice(-3);
2017-10-12 16:07:50 +08:00
},
handleExceed(files, fileList) {
this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
2017-12-12 17:39:39 +08:00
},
2017-12-15 13:50:54 +08:00
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }? `);
2016-11-13 22:00:55 +08:00
}
}
}
< / script >
2016-11-10 21:46:55 +08:00
## Upload
2016-11-13 22:00:55 +08:00
Upload files by clicking or drag-and-drop
2016-11-10 21:46:55 +08:00
### Click to upload files
2017-12-15 13:50:54 +08:00
:::demo Customize upload button type and text using `slot` . Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the `before-remove` hook.
2016-11-10 21:46:55 +08:00
```html
< el-upload
2017-02-15 00:59:17 +08:00
class="upload-demo"
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2016-11-10 21:46:55 +08:00
:on-preview="handlePreview"
2016-11-27 14:31:33 +08:00
:on-remove="handleRemove"
2017-12-15 13:50:54 +08:00
:before-remove="beforeRemove"
2017-10-12 16:07:50 +08:00
multiple
:limit="3"
:on-exceed="handleExceed"
2017-02-15 00:59:17 +08:00
:file-list="fileList">
2016-11-13 22:00:55 +08:00
< el-button size = "small" type = "primary" > Click to upload< / el-button >
2017-02-15 00:59:17 +08:00
< div slot = "tip" class = "el-upload__tip" > jpg/png files with a size less than 500kb< / div >
2016-11-10 21:46:55 +08:00
< / el-upload >
< script >
export default {
2016-11-27 14:31:33 +08:00
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'}]
};
},
2016-11-10 21:46:55 +08:00
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
2017-10-12 16:07:50 +08:00
},
handleExceed(files, fileList) {
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
2017-12-12 17:39:39 +08:00
},
2017-12-15 13:50:54 +08:00
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }? `);
2016-11-10 21:46:55 +08:00
}
}
}
< / script >
```
:::
2017-02-15 00:59:17 +08:00
### User avatar upload
2016-11-10 21:46:55 +08:00
2017-02-20 11:34:59 +08:00
Use `before-upload` hook to limit the upload file format and size.
2016-11-10 21:46:55 +08:00
2017-12-12 12:45:09 +08:00
:::demo
2016-11-10 21:46:55 +08:00
```html
< el-upload
2017-02-15 00:59:17 +08:00
class="avatar-uploader"
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2017-02-15 00:59:17 +08:00
:show-file-list="false"
2017-03-20 12:45:00 +08:00
:on-success="handleAvatarSuccess"
2017-02-15 00:59:17 +08:00
:before-upload="beforeAvatarUpload">
< img v-if = "imageUrl" :src = "imageUrl" class = "avatar" >
< i v-else class = "el-icon-plus avatar-uploader-icon" > < / i >
2016-11-10 21:46:55 +08:00
< / el-upload >
2017-02-24 14:30:27 +08:00
< style >
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9 ;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
2017-10-01 20:16:16 +08:00
border-color: #409EFF ;
2017-02-24 14:30:27 +08:00
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d ;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
< / style >
2016-11-10 21:46:55 +08:00
< script >
export default {
2016-11-27 14:31:33 +08:00
data() {
return {
2017-02-15 00:59:17 +08:00
imageUrl: ''
2016-11-27 14:31:33 +08:00
};
},
2017-02-15 00:59:17 +08:00
methods: {
2017-03-20 12:45:00 +08:00
handleAvatarSuccess(res, file) {
2017-02-15 00:59:17 +08:00
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2 ;
if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!');
}
if (!isLt2M) {
this.$message.error('Avatar picture size can not exceed 2MB!');
}
return isJPG & & isLt2M;
}
}
}
< / script >
```
:::
### Photo Wall
2017-02-20 11:34:59 +08:00
Use `list-type` to change the fileList style.
2017-02-15 00:59:17 +08:00
2017-12-12 12:45:09 +08:00
:::demo
2017-02-15 00:59:17 +08:00
```html
< el-upload
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2017-02-15 00:59:17 +08:00
list-type="picture-card"
2017-02-20 11:34:59 +08:00
:on-preview="handlePictureCardPreview"
2017-02-15 00:59:17 +08:00
:on-remove="handleRemove">
< i class = "el-icon-plus" > < / i >
< / el-upload >
2018-01-28 14:44:53 +08:00
< el-dialog :visible . sync = "dialogVisible" >
2017-02-20 11:34:59 +08:00
< img width = "100%" :src = "dialogImageUrl" alt = "" >
< / el-dialog >
2017-02-15 00:59:17 +08:00
< script >
export default {
2017-02-20 11:34:59 +08:00
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
2016-11-10 21:46:55 +08:00
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
2017-02-20 11:34:59 +08:00
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
2016-11-10 21:46:55 +08:00
}
}
}
< / script >
```
2016-11-13 22:00:55 +08:00
:::
2016-11-10 21:46:55 +08:00
2017-02-15 00:59:17 +08:00
### FileList with thumbnail
2016-11-10 21:46:55 +08:00
2017-12-12 12:45:09 +08:00
:::demo
2016-11-10 21:46:55 +08:00
```html
< el-upload
2017-02-15 00:59:17 +08:00
class="upload-demo"
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2016-11-10 21:46:55 +08:00
:on-preview="handlePreview"
:on-remove="handleRemove"
2017-02-20 11:34:59 +08:00
:file-list="fileList2"
2017-02-15 00:59:17 +08:00
list-type="picture">
< el-button size = "small" type = "primary" > Click to upload< / el-button >
< div slot = "tip" class = "el-upload__tip" > jpg/png files with a size less than 500kb< / div >
2016-11-10 21:46:55 +08:00
< / el-upload >
< script >
export default {
2016-11-27 14:31:33 +08:00
data() {
return {
2017-02-20 11:34:59 +08:00
fileList2: [{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'}]
2016-11-27 14:31:33 +08:00
};
},
2016-11-10 21:46:55 +08:00
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
< / script >
```
:::
2017-02-20 11:34:59 +08:00
### File list control
Use `on-change` hook function to control upload file list
2017-12-12 12:45:09 +08:00
:::demo
2017-02-20 11:34:59 +08:00
```html
< el-upload
class="upload-demo"
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2017-02-20 11:34:59 +08:00
:on-change="handleChange"
:file-list="fileList3">
< el-button size = "small" type = "primary" > Click to upload< / el-button >
< div slot = "tip" class = "el-upload__tip" > jpg/png files with a size less than 500kb< / div >
< / el-upload >
< script >
export default {
data() {
return {
fileList3: [{
name: 'food.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}, {
name: 'food2.jpeg',
2018-04-03 11:50:20 +08:00
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
2017-02-20 11:34:59 +08:00
}]
};
},
methods: {
handleChange(file, fileList) {
this.fileList3 = fileList.slice(-3);
}
}
}
< / script >
```
:::
2017-02-15 00:59:17 +08:00
### Drag to upload
You can drag your file to a certain area to upload it.
2017-12-12 12:45:09 +08:00
:::demo
2017-02-15 00:59:17 +08:00
```html
< el-upload
class="upload-demo"
drag
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2017-02-15 00:59:17 +08:00
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
2017-03-20 12:45:00 +08:00
multiple>
2017-02-15 00:59:17 +08:00
< i class = "el-icon-upload" > < / i >
< div class = "el-upload__text" > Drop file here or < em > click to upload< / em > < / div >
< div class = "el-upload__tip" slot = "tip" > jpg/png files with a size less than 500kb< / div >
< / el-upload >
```
:::
### Manual upload
2017-12-12 12:45:09 +08:00
:::demo
2017-02-15 00:59:17 +08:00
```html
< el-upload
class="upload-demo"
ref="upload"
2017-03-03 09:02:08 +08:00
action="https://jsonplaceholder.typicode.com/posts/"
2017-02-15 00:59:17 +08:00
:auto-upload="false">
< el-button slot = "trigger" size = "small" type = "primary" > select file< / el-button >
< el-button style = "margin-left: 10px;" size = "small" type = "success" @click =" submitUpload " > upload to server</ el-button >
< div class = "el-upload__tip" slot = "tip" > jpg/png files with a size less than 500kb< / div >
< / el-upload >
< script >
export default {
methods: {
submitUpload() {
this.$refs.upload.submit();
}
}
}
< / script >
```
:::
2016-11-10 21:46:55 +08:00
### Attributes
2016-11-13 22:00:55 +08:00
Attribute | Description | Type | Accepted Values | Default
2016-11-10 21:46:55 +08:00
----| ----| ----| ----| ----
2016-11-13 22:00:55 +08:00
action | required, request URL | string | — | —
headers | request headers | object | — | —
multiple | whether uploading multiple files is permitted | boolean | — | —
data | additions options of request | object | — | —
name | key name for uploaded file | string | — | file
with-credentials | whether cookies are sent | boolean | — |false
2017-08-18 10:28:34 +08:00
show-file-list | whether to show the uploaded file list | boolean | — | true
2017-03-09 12:19:24 +08:00
drag | whether to activate drag and drop mode | boolean | — | false
2016-11-13 22:00:55 +08:00
accept | accepted [file types ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept ), will not work when `thumbnail-mode` is `true` | string | — | —
on-preview | hook function when clicking the uploaded files | function(file) | — | —
on-remove | hook function when files are removed | function(file, fileList) | — | —
on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
2017-02-15 00:59:17 +08:00
on-error | hook function when some errors occurs | function(err, file, fileList) | — | —
2016-12-15 23:49:29 +08:00
on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
2017-04-25 21:56:46 +08:00
on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
2017-05-10 20:44:49 +08:00
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
2017-12-15 13:50:54 +08:00
before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | function(file, fileList) | — | — |
2016-11-13 22:00:55 +08:00
thumbnail-mode | whether thumbnail is displayed | boolean | — | false
2017-10-16 14:07:24 +08:00
file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
2017-02-15 00:59:17 +08:00
list-type | type of fileList | string | text/picture/picture-card | text |
auto-upload | whether to auto upload file | boolean | — | true |
2017-03-09 14:30:00 +08:00
http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
2017-04-21 11:57:30 +08:00
disabled | whether to disable upload | boolean | — | false |
2017-10-12 16:07:50 +08:00
limit | maximum number of uploads allowed | number | — | — |
on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
2016-11-13 22:00:55 +08:00
2018-07-18 15:39:04 +08:00
### Slot
| Name | Description |
|------|--------|
| trigger | content which triggers file dialog |
| tip | content of tips |
2017-05-02 12:46:57 +08:00
### Methods
| Methods Name | Description | Parameters |
2016-11-13 22:00:55 +08:00
|---------- |-------- |---------- |
2017-05-08 20:21:24 +08:00
| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |
2018-09-20 16:50:27 +08:00
| abort | cancel upload request | ( file: fileList's item ) |
| submit | upload the file list manually | — |