Through slot
You can import custom upload button types and text prompts. You can limit the number of uploaded files and define the behavior when the limit is exceeded by setting limit and on-exceed ed. You can prevent file removal by setting before remove.
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">Click upload</el-button>
<div slot="tip" class="el-upload__tip">Upload only jpg/png Documents, and no more than 500 kb</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);
},
handleExceed(files, fileList) {
this.$message.warning(`Currently, 3 files are limited to be selected, and this time ${files.length} Files selected ${files.length + fileList.length} Files`);
},
beforeRemove(file, fileList) {
return this.$confirm(`OK to remove ${ file.name }？`);
}
}
}
</script>
Attribute
| parameter | explain | type | Optional value | Default value |
|---|
| action | Required parameter, upload address | string | — | — |
| headers | Set upload request header | object | — | — |
| multiple | Support multiple files | boolean | — | — |
| data | Additional parameters attached when uploading | object | — | — |
| name | Uploaded file field name | string | — | file |
| with-credentials | Support sending cookie credential information | boolean | — | false |
| show-file-list | Whether to display the list of uploaded files | boolean | — | true |
| drag | Enable drag upload | boolean | — | false |
| accept | Accept Uploaded file type (this parameter is invalid in thumbnail mode) | string | — | — |
| on-preview | Click the hook when clicking the uploaded file in the file list | function(file) | — | — |
| on-remove | Hook when removing files from file list | function(file, fileList) | — | — |
| on-success | Hook when the file is uploaded successfully | function(response, file, fileList) | — | — |
| on-error | Hook when file upload fails | function(err, file, fileList) | — | — |
| on-progress | Hook when uploading files | function(event, file, fileList) | — | — |
| on-change | The hook when the file status changes will be called when adding a file, uploading successfully and uploading failed | function(file, fileList) | — | — |
| before-upload | The hook before uploading the file. The parameter is the uploaded file. If false is returned or Promise is returned and reject ed, the upload will be stopped. | function(file) | — | — |
| before-remove | Delete the hook before the file. The parameters are uploaded files and file list. If false is returned or Promise is returned and reject ed, the deletion will be stopped. | function(file, fileList) | — | — |
| list-type | Type of file list | string | text/picture/picture-card | text |
| auto-upload | Whether to upload the file immediately after selecting it | boolean | — | true |
| file-list | List of uploaded files, for example: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg '}] | array | — | [] |
| http-request | Override the default upload behavior, and you can customize the implementation of upload | function | — | — |
| disabled | Disable | boolean | — | false |
| limit | Maximum number of uploads allowed | number | — | — |
| on-exceed | Hook when the number of files exceeds the limit | function(files, fileList) | — | - |
Slot
| name | explain |
|---|
| trigger | Trigger the contents of the file selection box |
| tip | Prompt description text |
Methods
| Method name | explain | parameter |
|---|
| clearFiles | Empty the list of uploaded files (this method does not support calling in before-upload). | — |
| abort | Cancel upload request | (file: file object in filelist) |
| submit | Manually upload file list | — |