mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-18 10:59:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: [el-upload]add example of setting on-exceed to cover the old file (#4861)

Browse Source 
* docs: [el-upload]add example of seting on-exceed to cover the old file

* Update packages/components/upload/src/useHandlers.ts

Co-authored-by: btea <2356281422@qq.com>

* Update docs/examples/upload/limit-cover.vue

Co-authored-by: btea <2356281422@qq.com>

Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
Alan Wang 2021-12-21 09:27:52 +08:00 committed by GitHub
parent f387feab42
commit 23712260f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/en-US/component/upload.md
View File

@ -15,6 +15,14 @@ upload/basic
:::
## Cover previous file
:::demo Set `limit` and `on-exceed` to automatically replace the previous file when select a new file.
upload/limit-cover
:::
## User avatar upload
Use `before-upload` hook to limit the upload file format and size.
@ -123,8 +131,9 @@ upload/manual
## Methods
| Methods Name | Description | Parameters |
| ------------ | --------------------------------------------------------------------------------------- | --------------------------- |
| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |
| abort | cancel upload request | （ file: fileList's item ） |
| submit | upload the file list manually | — |
| Methods Name | Description | Parameters | Default |
| ------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------- |
| clearFiles | clear the file list (this method is not supported in the `before-upload` hook). | UploadStatus[] (UploadStatus = 'ready' \| 'uploading' \| 'success' \| 'fail') | ['ready', 'uploading', 'success', 'fail'] |
| abort | cancel upload request | ( file: fileList's item ) | |
| submit | upload the file list manually | — | |
| handleStart | select the file manually | ( file: files' item) | |

39
docs/examples/upload/limit-cover.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<el-upload
ref="upload"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
>
<template #trigger>
<el-button size="small" type="primary">select file</el-button>
</template>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="submitUpload"
>upload to server</el-button
>
<template #tip>
<div class="el-upload__tip" style="color: red">
limit 1 file, new file will cover the old file
</div>
</template>
</el-upload>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const upload = ref()
const handleExceed = (files) => {
upload.value.clearFiles()
upload.value.handleStart(files[0])
}
const submitUpload = () => {
upload.value.submit()
}
</script>

6
packages/components/upload/src/useHandlers.ts
View File

@ -34,9 +34,11 @@ export default (props: IUseHandlersProps) => {
uploadRef.value.abort(file)
}
function clearFiles(status: UploadStatus[] = ['success', 'fail']) {
function clearFiles(
status: UploadStatus[] = ['ready', 'uploading', 'success', 'fail']
) {
uploadFiles.value = uploadFiles.value.filter((row) => {
return status.indexOf(row.status) === -1
return !status.includes(row.status)
})
}