mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-11-27 04:09:51 +08:00
feat(upload): add before-upload prop (#294)
* feat(upload): add before-upload method * docs(upload): add before-upload demo and log (#291) * Update src/upload/demos/enUS/before-upload.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/enUS/before-upload.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/enUS/before-upload.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * fix(upload): fix husky * docs(upload): fix zhCN md as suggested * fix(upload): replace file with copyFiles and remove console log * docs(upload): fix md method * Update .husky/pre-commit Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * fix(upload): rewrite with FileInfo * docs(upload): changelog with FileInfo * Update src/upload/demos/enUS/before-upload.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/zhCN/before-upload.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/upload/src/interface.ts Co-authored-by: 07akioni <07akioni2@gmail.com> * docs(upload): delete useless attr * fix(upload): optimize some code * Update src/upload/src/Upload.tsx Co-authored-by: 07akioni <07akioni2@gmail.com> Co-authored-by: kev1nzh <kev1nzh@app-ark.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
Kev1nzh
GitHub
parent
7b3821eb08
commit
8ae18e646d
0
.husky/pre-commit
Executable file → Normal file
0
.husky/pre-commit
Executable file → Normal file
32
src/upload/demos/enUS/before-upload.demo.md
Normal file
32
src/upload/demos/enUS/before-upload.demo.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Before Upload Hook
|
||||
|
||||
Use `before-upload` to prevent uploading.
|
||||
|
||||
```html
|
||||
<n-upload
|
||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||
@before-upload="beforeUpload"
|
||||
>
|
||||
<n-button>Upload PNG</n-button>
|
||||
</n-upload>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const message = useMessage()
|
||||
return {
|
||||
async beforeUpload ({ file, fileList }) {
|
||||
if (file.file.type !== 'image/png') {
|
||||
message.error('Only upload picture files in png format, please re-upload.')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -11,6 +11,7 @@ submit-manually
|
||||
controlled
|
||||
on-finish
|
||||
default-files
|
||||
before-upload
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -39,7 +40,7 @@ default-files
|
||||
| on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | Callback function triggered on fileList changes. |
|
||||
| on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | The callback of file upload finish. You can modify the UploadFile or retun a new UploadFile. |
|
||||
| on-remove | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => boolean \| Promise<boolean> \| any` | `() => true` | The callback of file removal. Return false, promise resolve false or promise reject will cancel this removal. |
|
||||
|
||||
| on-before-upload | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. |
|
||||
### UploadFile Type
|
||||
|
||||
| Property | Type | Description |
|
||||
|
||||
32
src/upload/demos/zhCN/before-upload.demo.md
Normal file
32
src/upload/demos/zhCN/before-upload.demo.md
Normal file
@ -0,0 +1,32 @@
|
||||
# 限制上传文件
|
||||
|
||||
使用 `before-upload` 限制上传。
|
||||
|
||||
```html
|
||||
<n-upload
|
||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||
@before-upload="beforeUpload"
|
||||
>
|
||||
<n-button>上传 PNG 文件</n-button>
|
||||
</n-upload>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const message = useMessage()
|
||||
return {
|
||||
async beforeUpload ({ file, fileList }) {
|
||||
if (file.file.type !== 'image/png') {
|
||||
message.error('只能上传png格式的图片文件，请重新上传')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -11,6 +11,7 @@ submit-manually
|
||||
controlled
|
||||
on-finish
|
||||
default-files
|
||||
before-upload
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -38,8 +39,7 @@ default-files
|
||||
| on-change | `(options: { file: UploadFile, fileList: Array<UploadFile>, event?: Event }) => void` | `() => {}` | 组件状态变化的回调，组件的任何文件状态变化都会触发回调 |
|
||||
| on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile |
|
||||
| on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 |
|
||||
| on-remove | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => boolean \| Promise<boolean> \| any` | `() => true` | 文件移除的回调，返回 false 或者 promise resolve false 或者 promise reject 会不执行这次删除 |
|
||||
|
||||
| on-before-upload | `(options: { file: UploadFile, fileList: UploadFile[] }) => (Promise<boolean \| void> \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 |
|
||||
### UploadFile Type
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
|
||||
@ -33,7 +33,8 @@ import {
|
||||
OnDownload,
|
||||
OnChange,
|
||||
uploadInjectionKey,
|
||||
OnUpdateFileList
|
||||
OnUpdateFileList,
|
||||
OnBeforeUpload
|
||||
} from './interface'
|
||||
import { useMergedState } from 'vooks'
|
||||
import { uploadDraggerKey } from './UploadDragger'
|
||||
@ -209,6 +210,7 @@ const uploadProps = {
|
||||
onChange: Function as PropType<OnChange>,
|
||||
onRemove: Function as PropType<OnRemove>,
|
||||
onFinish: Function as PropType<OnFinish>,
|
||||
onBeforeUpload: Function as PropType<OnBeforeUpload>,
|
||||
/** currently of no usage */
|
||||
onDownload: Function as PropType<OnDownload>,
|
||||
defaultUpload: {
|
||||
@ -313,22 +315,33 @@ export default defineComponent({
|
||||
}
|
||||
function handleFileAddition (files: FileList | null, e?: Event): void {
|
||||
if (!files) return
|
||||
Array.from(files).forEach((file) => {
|
||||
const fileInfo: FileInfo = {
|
||||
id: createId(),
|
||||
name: file.name,
|
||||
status: 'pending',
|
||||
percentage: 0,
|
||||
file: file,
|
||||
url: null
|
||||
}
|
||||
doChange(fileInfo, e, {
|
||||
append: true
|
||||
const { onBeforeUpload } = props
|
||||
|
||||
void Promise.all(
|
||||
Array.from(files).map(async (file) => {
|
||||
const fileInfo: FileInfo = {
|
||||
id: createId(),
|
||||
name: file.name,
|
||||
status: 'pending',
|
||||
percentage: 0,
|
||||
file: file,
|
||||
url: null
|
||||
}
|
||||
if (!onBeforeUpload || await onBeforeUpload({
|
||||
file: fileInfo,
|
||||
fileList: mergedFileListRef.value
|
||||
}) !== false) {
|
||||
doChange(fileInfo, e, {
|
||||
append: true
|
||||
})
|
||||
}
|
||||
})
|
||||
)
|
||||
.then(() => {
|
||||
if (props.defaultUpload) {
|
||||
submit()
|
||||
}
|
||||
})
|
||||
})
|
||||
if (props.defaultUpload) {
|
||||
submit()
|
||||
}
|
||||
}
|
||||
function submit (fileId?: string): void {
|
||||
const {
|
||||
@ -376,7 +389,7 @@ export default defineComponent({
|
||||
}
|
||||
) => {
|
||||
const { append, remove } = options
|
||||
const fileListAfterChange = mergedFileListRef.value
|
||||
const fileListAfterChange = Array.from(mergedFileListRef.value)
|
||||
const fileIndex = fileListAfterChange.findIndex(
|
||||
(file) => file.id === fileAfterChange.id
|
||||
)
|
||||
|
||||
@ -73,3 +73,8 @@ export interface XhrHandlers {
|
||||
export interface UploadInst {
|
||||
submit: () => void
|
||||
}
|
||||
|
||||
export type OnBeforeUpload = (data: {
|
||||
file: FileInfo
|
||||
fileList: FileInfo[]
|
||||
}) => Promise<unknown>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user