Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 b5415811 编写于 作者: X xiaoyatong 提交者： GitHub
浏览文件
操作

feat: uploader 增加元素变量，及demo (#728)

上级 f292a54f
隐藏空白更改
内联 并排
Showing with 702 addition and 337 deletion
src/packages/uploader/demo.taro.tsx
浏览文件 @ b5415811
import React, { useState, useRef } from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Button, Uploader, Progress } from '@/packages/nutui.react.taro'
import { Button, Uploader, Progress, Cell } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
export type FileItemStatus =
......@@ -47,10 +47,10 @@ interface T {
'25e04d44': string
d06e873e: string
ca3903f3: string
upload_progress_action: string
uploadProgressAction: string
'84aa6bce': string
upload_list_show: string
upload_default_progress: string
uploadListShow: string
uploadDefaultProgress: string
a4afedb5: string
'37c65f47': string
bb5caa9c: string
......@@ -59,7 +59,7 @@ interface T {
b7454181: string
'5c393e52': string
e3217a8d: string
upload_xhr_custom: string
uploadXhrCustom: string
'67fffe24': string
fcf01d1a: string
'7db1a8b2': string
......@@ -67,7 +67,7 @@ interface T {
const UploaderDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
'6114cef1': '文件1.png',
'6114cef1': '文件文件文件文件1.png',
'844759c9': '上传成功',
df9128ec: '文件2.png',
'219481a6': '上传失败',
......@@ -76,10 +76,10 @@ const UploaderDemo = () => {
'25e04d44': 'oversize触发文件大小不能超过50kb',
d06e873e: 'start触发',
ca3903f3: 'delete事件触发',
upload_progress_action: 'progress事件触发',
uploadProgressAction: 'progress事件触发',
'84aa6bce': '基础用法',
upload_list_show: '基础用法-上传列表展示',
upload_default_progress: '自定义上传使用默认进度条',
uploadListShow: '基础用法-上传列表展示',
uploadDefaultProgress: '自定义上传使用默认进度条',
a4afedb5: '上传状态',
'37c65f47': '自定义上传样式',
bb5caa9c: '上传文件',
......@@ -88,7 +88,7 @@ const UploaderDemo = () => {
b7454181: '限制上传大小（每个文件最大不超过50kb）',
'5c393e52': '图片压缩（在beforeupload钩子中处理）',
e3217a8d: '自定义数据 FormData、headers',
upload_xhr_custom: '自定义 Taro.uploadFile 上传方式(before-xhr-upload)',
uploadXhrCustom: '自定义 Taro.uploadFile 上传方式(before-xhr-upload)',
'67fffe24': '选中文件后，通过按钮手动执行上传',
fcf01d1a: '执行上传',
'7db1a8b2': '禁用状态',
......@@ -103,10 +103,10 @@ const UploaderDemo = () => {
'25e04d44': 'oversize觸發檔大小不能超過50kb',
d06e873e: 'start觸發',
ca3903f3: 'delete事件觸發',
upload_progress_action: 'progress事件觸發',
uploadProgressAction: 'progress事件觸發',
'84aa6bce': '基础用法',
upload_list_show: '基礎用法-上傳列表展示',
upload_default_progress: '自定義上傳使用默認進度條',
uploadListShow: '基礎用法-上傳列表展示',
uploadDefaultProgress: '自定義上傳使用默認進度條',
a4afedb5: '上傳狀態',
'37c65f47': '自定義上傳樣式',
bb5caa9c: '上傳檔',
......@@ -115,13 +115,13 @@ const UploaderDemo = () => {
b7454181: '限制上傳大小（每個檔案最大不超過50kb）',
'5c393e52': '圖片壓縮（在beforeupload鉤子中處理）',
e3217a8d: '自定義數據 FormData、headers',
upload_xhr_custom: '自定義 Taro.uploadFile 上傳方式(before-xhr-upload)',
uploadXhrCustom: '自定義 Taro.uploadFile 上傳方式(before-xhr-upload)',
'67fffe24': '選取檔後，通過按鈕手動執行上傳',
fcf01d1a: '執行上傳',
'7db1a8b2': '禁用狀態',
},
'en-US': {
'6114cef1': 'File 1 .png',
'6114cef1': 'FileFileFileFile 1 .png',
'844759c9': 'Upload successful',
df9128ec: 'File 2 .png',
'219481a6': 'Upload failed',
......@@ -130,10 +130,10 @@ const UploaderDemo = () => {
'25e04d44': 'The oversize trigger file size cannot exceed 50kb',
d06e873e: 'start triggered',
ca3903f3: 'The delete event is triggered',
upload_progress_action: 'The progress event is triggered',
uploadProgressAction: 'The progress event is triggered',
'84aa6bce': 'Basic usage',
upload_list_show: 'Basic usage - upload list display',
upload_default_progress: 'Custom upload uses default progress bar',
uploadListShow: 'Basic usage - upload list display',
uploadDefaultProgress: 'Custom upload uses default progress bar',
a4afedb5: 'Upload status',
'37c65f47': 'Customize the upload style',
bb5caa9c: 'Upload the file',
......@@ -142,8 +142,7 @@ const UploaderDemo = () => {
b7454181: 'Limit upload size (maximum 50kb per file)',
'5c393e52': 'Image compression (handled in a foreupload hook)',
e3217a8d: 'Custom data FormData, headers',
upload_xhr_custom:
'Custom xhr Taro.uploadFile method (before-xhr-upload)',
uploadXhrCustom: 'Custom xhr Taro.uploadFile method (before-xhr-upload)',
'67fffe24':
'After selecting Chinese, manually perform the upload via the button',
fcf01d1a: 'Perform the upload',
......@@ -166,6 +165,14 @@ const UploaderDemo = () => {
type: 'image',
uid: '123',
},
{
name: translated.df9128ec,
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'success',
message: translated['844759c9'],
type: 'image',
uid: '123',
},
{
name: translated.df9128ec,
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
......@@ -173,6 +180,15 @@ const UploaderDemo = () => {
message: translated['219481a6'],
type: 'image',
uid: '124',
errorIcon: 'star',
},
{
name: translated['29ab0c96'],
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
},
{
name: translated['29ab0c96'],
......@@ -181,6 +197,16 @@ const UploaderDemo = () => {
message: translated['403b055e'],
type: 'image',
uid: '125',
loadingIcon: 'loading1',
},
{
name: translated['29ab0c96'],
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
loadingIcon: ' ',
},
]
const onOversize = (files: Taro.chooseImage.ImageFile[]) => {
......@@ -191,7 +217,7 @@ const UploaderDemo = () => {
}
const onProgress = ({ event, options, percentage }: any) => {
setProgressPercent(percentage)
console.log(translated.upload_progress_action)
console.log(translated.uploadProgressAction)
}
const onDelete = (file: FileItem, fileList: FileType<string>[]) => {
console.log(translated.ca3903f3, file, fileList)
......@@ -208,7 +234,7 @@ const UploaderDemo = () => {
formData: options.formData,
name: options.name,
success(response: { errMsg: any; statusCode: number; data: string }) {
if (options.xhrState == response.statusCode) {
if (options.xhrState === response.statusCode) {
options.onSuccess?.(response, options)
} else {
options.onFailure?.(response, options)
......@@ -237,19 +263,31 @@ const UploaderDemo = () => {
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} bg-w`}>
<h2>{translated['84aa6bce']}</h2>
<Uploader url={uploadUrl} onStart={onStart} />
<Cell>
<Uploader
url={uploadUrl}
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader
url={uploadUrl}
uploadIconSize="20px"
uploadIconTip="商品主图"
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader url={uploadUrl} uploadIcon="dongdong" onStart={onStart} />
</Cell>
<h2>{translated.a4afedb5}</h2>
<Uploader
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
<h2>{translated.upload_list_show}</h2>
<h2>{translated.uploadListShow}</h2>
<Uploader
url={uploadUrl}
defaultFileList={defaultFileList}
......@@ -269,7 +307,7 @@ const UploaderDemo = () => {
</Button>
</Uploader>
<h2>{translated.upload_default_progress}</h2>
<h2>{translated.uploadDefaultProgress}</h2>
<Uploader url={uploadUrl} onProgress={onProgress}>
<Button type="success" size="small">
{translated.bb5caa9c}
......@@ -286,11 +324,12 @@ const UploaderDemo = () => {
<Uploader url={uploadUrl} sourceType={['camera']} />
<h2>{translated['0e5eaea3']}</h2>
<Uploader url={uploadUrl} maximum="5" />
<Uploader url={uploadUrl} maximum="5" multiple />
<h2>{translated.b7454181}</h2>
<Uploader
url={uploadUrl}
multiple
maximize={1024 * 50}
onOversize={onOversize}
/>
......@@ -298,7 +337,7 @@ const UploaderDemo = () => {
<h2>{translated.e3217a8d}</h2>
<Uploader url={uploadUrl} data={formData} headers={formData} />
<h2>{translated.upload_xhr_custom}</h2>
<h2>{translated.uploadXhrCustom}</h2>
<Uploader
url={uploadUrl}
method="put"
......
src/packages/uploader/demo.tsx
浏览文件 @ b5415811
......@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'
import { useTranslate } from '../../sites/assets/locale'
import { Uploader, FileItem, FileType } from './uploader'
import Button from '@/packages/button'
import Cell from '@/packages/cell'
import Progress from '@/packages/progress'
import './demo.scss'
......@@ -19,10 +20,10 @@ interface T {
'25e04d44': string
d06e873e: string
ca3903f3: string
upload_progress_action: string
uploadProgressAction: string
'84aa6bce': string
upload_list_show: string
upload_default_progress: string
uploadListShow: string
uploadDefaultProgress: string
a4afedb5: string
'37c65f47': string
bb5caa9c: string
......@@ -31,7 +32,7 @@ interface T {
b7454181: string
'5c393e52': string
e3217a8d: string
upload_xhr_custom: string
uploadXhrCustom: string
'67fffe24': string
fcf01d1a: string
'7db1a8b2': string
......@@ -39,7 +40,7 @@ interface T {
const UploaderDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
'6114cef1': '文件1.png',
'6114cef1': '文件文件文件文件1.png',
'844759c9': '上传成功',
df9128ec: '文件2.png',
'219481a6': '上传失败',
......@@ -48,10 +49,10 @@ const UploaderDemo = () => {
'25e04d44': 'oversize触发文件大小不能超过50kb',
d06e873e: 'start触发',
ca3903f3: 'delete事件触发',
upload_progress_action: 'progress事件触发',
uploadProgressAction: 'progress事件触发',
'84aa6bce': '基础用法',
upload_list_show: '基础用法-上传列表展示',
upload_default_progress: '自定义上传使用默认进度条',
uploadListShow: '基础用法-上传列表展示',
uploadDefaultProgress: '自定义上传使用默认进度条',
a4afedb5: '上传状态',
'37c65f47': '自定义上传样式',
bb5caa9c: '上传文件',
......@@ -60,7 +61,7 @@ const UploaderDemo = () => {
b7454181: '限制上传大小（每个文件最大不超过50kb）',
'5c393e52': '图片压缩（在beforeupload钩子中处理）',
e3217a8d: '自定义数据 FormData、headers',
upload_xhr_custom: '自定义 xhr 上传方式(before-xhr-upload)',
uploadXhrCustom: '自定义 xhr 上传方式(before-xhr-upload)',
'67fffe24': '选中文件后，通过按钮手动执行上传',
fcf01d1a: '执行上传',
'7db1a8b2': '禁用状态',
......@@ -75,10 +76,10 @@ const UploaderDemo = () => {
'25e04d44': 'oversize觸發檔大小不能超過50kb',
d06e873e: 'start觸發',
ca3903f3: 'delete事件觸發',
upload_progress_action: 'progress事件觸發',
uploadProgressAction: 'progress事件觸發',
'84aa6bce': '基础用法',
upload_list_show: '基礎用法-上傳列表展示',
upload_default_progress: '自定義上傳使用默認進度條',
uploadListShow: '基礎用法-上傳列表展示',
uploadDefaultProgress: '自定義上傳使用默認進度條',
a4afedb5: '上傳狀態',
'37c65f47': '自定義上傳樣式',
bb5caa9c: '上傳檔',
......@@ -87,13 +88,13 @@ const UploaderDemo = () => {
b7454181: '限制上傳大小（每個檔案最大不超過50kb）',
'5c393e52': '圖片壓縮（在beforeupload鉤子中處理）',
e3217a8d: '自定義數據 FormData、headers',
upload_xhr_custom: '自定義 xhr 上傳方式(before-xhr-upload)',
uploadXhrCustom: '自定義 xhr 上傳方式(before-xhr-upload)',
'67fffe24': '選取檔後，通過按鈕手動執行上傳',
fcf01d1a: '執行上傳',
'7db1a8b2': '禁用狀態',
},
'en-US': {
'6114cef1': 'File 1 .png',
'6114cef1': 'FileFileFileFile 1 .png',
'844759c9': 'Upload successful',
df9128ec: 'File 2 .png',
'219481a6': 'Upload failed',
......@@ -102,10 +103,10 @@ const UploaderDemo = () => {
'25e04d44': 'The oversize trigger file size cannot exceed 50kb',
d06e873e: 'start triggered',
ca3903f3: 'The delete event is triggered',
upload_progress_action: 'The progress event is triggered',
uploadProgressAction: 'The progress event is triggered',
'84aa6bce': 'Basic usage',
upload_list_show: 'Basic usage - upload list display',
upload_default_progress: 'Custom upload uses default progress bar',
uploadListShow: 'Basic usage - upload list display',
uploadDefaultProgress: 'Custom upload uses default progress bar',
a4afedb5: 'Upload status',
'37c65f47': 'Customize the upload style',
bb5caa9c: 'Upload the file',
......@@ -114,7 +115,7 @@ const UploaderDemo = () => {
b7454181: 'Limit upload size (maximum 50kb per file)',
'5c393e52': 'Image compression (handled in a foreupload hook)',
e3217a8d: 'Custom data FormData, headers',
upload_xhr_custom: 'Custom xhr upload method (before-xhr-upload)',
uploadXhrCustom: 'Custom xhr upload method (before-xhr-upload)',
'67fffe24':
'After selecting Chinese, manually perform the upload via the button',
fcf01d1a: 'Perform the upload',
......@@ -137,6 +138,14 @@ const UploaderDemo = () => {
type: 'image',
uid: '123',
},
{
name: translated.df9128ec,
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'success',
message: translated['844759c9'],
type: 'image',
uid: '123',
},
{
name: translated.df9128ec,
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
......@@ -144,6 +153,7 @@ const UploaderDemo = () => {
message: translated['219481a6'],
type: 'image',
uid: '124',
errorIcon: 'star',
},
{
name: translated['29ab0c96'],
......@@ -153,6 +163,24 @@ const UploaderDemo = () => {
type: 'image',
uid: '125',
},
{
name: translated['29ab0c96'],
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
loadingIcon: 'loading1',
},
{
name: translated['29ab0c96'],
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
loadingIcon: ' ',
},
]
const fileToDataURL = (file: Blob): Promise<any> => {
return new Promise((resolve) => {
......@@ -185,7 +213,7 @@ const UploaderDemo = () => {
}
const onProgress = ({ event, options, percentage }: any) => {
setProgressPercent(percentage)
console.log(translated.upload_progress_action)
console.log(translated.uploadProgressAction)
}
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log(translated.ca3903f3, file, fileList)
......@@ -204,7 +232,7 @@ const UploaderDemo = () => {
return [f]
}
const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
if (options.method.toLowerCase() == 'put') {
if (options.method.toLowerCase() === 'put') {
xhr.send(options.sourceFile)
} else {
xhr.send(options.formData)
......@@ -217,19 +245,31 @@ const UploaderDemo = () => {
<>
<div className="demo bg-w demo-uploader">
<h2>{translated['84aa6bce']}</h2>
<Uploader url={uploadUrl} onStart={onStart} />
<Cell>
<Uploader
url={uploadUrl}
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader
url={uploadUrl}
uploadIconSize="20px"
uploadIconTip="商品主图"
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader url={uploadUrl} uploadIcon="dongdong" onStart={onStart} />
</Cell>
<h2>{translated.a4afedb5}</h2>
<Uploader
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
<h2>{translated.upload_list_show}</h2>
<h2>{translated.uploadListShow}</h2>
<Uploader
url={uploadUrl}
defaultFileList={defaultFileList}
......@@ -249,7 +289,7 @@ const UploaderDemo = () => {
</Button>
</Uploader>
<h2>{translated.upload_default_progress}</h2>
<h2>{translated.uploadDefaultProgress}</h2>
<Uploader url={uploadUrl} onProgress={onProgress}>
<Button type="success" size="small">
{translated.bb5caa9c}
......@@ -287,7 +327,7 @@ const UploaderDemo = () => {
withCredentials
/>
<h2>{translated.upload_xhr_custom}</h2>
<h2>{translated.uploadXhrCustom}</h2>
<Uploader
url={uploadUrl}
method="put"
......
src/packages/uploader/doc.en-US.md
浏览文件 @ b5415811
......@@ -77,8 +77,6 @@ const App = () => {
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
</>
......@@ -317,64 +315,65 @@ export default App;
### Prop
| Attribute |Description | Type | Default |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| autoUpload `v1.3.4` | Whether to upload the file immediately after selecting it, if false, you need to manually execute the ref submit method to upload | Boolean | true |
| name | The name of the `input` tag `name`, the file parameter name sent to the background | String | "file" |
| url | The interface address of the upload server | String | - |
| defaultFileList | List of uploaded files by default | FileItem[] | [] |
| isPreview | Whether to display the preview image after the upload is successful | Boolean | true |
| defaultImg | When uploading a default image URL in a non-image ('image') format | String | '' |
| isDeletable | Whether to display the delete button | Boolean | true |
| method | The http method of upload request | String | "post" |
| listType `v1.3.4` | The built-in style of the upload list, supports two basic styles picture, list | String | "picture" |
| capture | Capture, can be set to[camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，，turn on the camera directly | String | false |
| maximize | You can set the maximum upload file size (bytes) | Number丨String | Number.MAX_VALUE |
| maximum | File upload limit | Number丨String | 1 |
| clearInput | Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file | Boolean | true |
| accept | File types that can be accepted. See[Des](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | Set request headers | Object | {} |
| data | Uploading extra params or function which can return uploading extra params formData | Object | {} |
| uploadIcon | Upload area[icon name](#/zh-CN/icon)or image link | String | "photograph" |
| uploadIconSize `v1.3.4` | Upload area [icon size](#/icon) size, such as `20px` `2em` `2rem` | String or Number | - |
| xhrState | The success status (status) value of the interface response | Number | 200 |
| withCredentials | Support for sending cookie credential information | Boolean | false |
| multiple | Whether to support multiple file selection | Boolean | false |
| disabled | Whether to disable file upload | Boolean | false |
| timeout | timeout, in milliseconds | Number丨String | 1000 * 30 |
| beforeUpload `v1.3.4 Abandon` | The pre-upload function needs to return a `Promise` object | Function | null |
| onBeforeUpload `v1.3.4` | The pre-upload function needs to return a `Promise` object | Function | null |
| onBeforeXhrUpload `v1.3.4` | When performing an XHR upload, the custom method | Function(xhr，option) | null |
| beforeDelete `v1.3.4 Abandon` | Callback when file is removed. If the return value is false, it will not be removed. Supports returning a `Promise` object, which is not removed when the `Promise` object resolves(false) or rejects | Function(file): boolean 丨Promise | - |
| onBeforeDelete `v1.3.4` | Callback when file is removed. If the return value is false, it will not be removed. Supports returning a `Promise` object, which is not removed when the `Promise` object resolves(false) or rejects | Function(file): boolean 丨Promise | - |
| Attribute|Description| Type| Default|
|-------------------|---------------------|-----------------|--------|
| autoUpload `v1.3.4`| Whether to upload the file immediately after selecting it, if false, you need to manually execute the ref submit method to upload| Boolean | true|
| name| The name of the `input` tag `name`, the file parameter name sent to the background| String| "file"|
| url| The interface address of the upload server| String| -|
| defaultFileList| List of uploaded files by default| FileItem[]| []|
| isPreview| Whether to display the preview image after the upload is successful| Boolean| true|
| defaultImg| When uploading a default image URL in a non-image ('image') format| String| '' |
| isDeletable | Whether to display the delete button| Boolean| true|
| method| The http method of upload request| String| "post"|
| listType `v1.3.4`| The built-in style of the upload list, supports two basic styles picture, list| String| "picture"|
| capture| Capture, can be set to[camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，，turn on the camera directly| String | false|
| maximize| You can set the maximum upload file size (bytes)| Number丨String | Number.MAX_VALUE |
| maximum| File upload limit| Number丨String| 1|
| clearInput| Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file| Boolean| true|
| accept| File types that can be accepted. See[Des](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String| *|
| headers| Set request headers| Object| {}|
| data| Uploading extra params or function which can return uploading extra params formData| Object| {}|
| uploadIcon| Upload area[icon name](#/zh-CN/icon)or image link| String| "photograph"|
| uploadIconSize `v1.3.4` | Upload area [icon size](#/icon) size, such as `20px` `2em` `2rem`| String or Number| - |
| uploadIconTip`v1.4.9`| Upload area tip| String| ""|
| xhrState| The success status (status) value of the interface response| Number| 200|
| withCredentials | Support for sending cookie credential information| Boolean| false|
| multiple| Whether to support multiple file selection| Boolean| false|
| disabled| Whether to disable file upload| Boolean| false|
| timeout| timeout, in milliseconds| Number丨String| 1000 * 30|
| beforeUpload `v1.3.4 Abandon`| The pre-upload function needs to return a `Promise` object| Function| null|
| onBeforeUpload `v1.3.4` | The pre-upload function needs to return a `Promise` object| Function| null|
| onBeforeXhrUpload `v1.3.4` | When performing an XHR upload, the custom method| Function(xhr，option)| null|
| beforeDelete `v1.3.4 Abandon` | Callback when file is removed. If the return value is false, it will not be removed. Supports returning a `Promise` object, which is not removed when the `Promise` object resolves(false) or rejects| Function(file): boolean 丨Promise | -|
| onBeforeDelete `v1.3.4` | Callback when file is removed. If the return value is false, it will not be removed. Supports returning a `Promise` object, which is not removed when the `Promise` object resolves(false) or rejects| Function(file): boolean 丨Promise | -|
### FileItem
| Attribute | Description | Default |
|----------|---------------------------------------------------------|---------------------------------|
| status | File status value, optional ‘ready,uploading,success,error’' | "ready" |
| uid | Unique ID of the file | new Date().getTime().toString() |
| name | File name | "" |
| url | File path | "" |
| type | File type | "image/jpeg" |
| formData | Upload the required data | new FormData() |
| Attribute | Description| Default|
|----------|--------------|-------------|
| status | File status value, optional ‘ready,uploading,success,error’' | "ready"|
| uid | Unique ID of the file| new Date().getTime().toString() |
| name | File name| ""|
| url | File path| ""|
| type | File type| "image/jpeg"|
| formData | Upload the required data| new FormData() |
### Event
| Event | Description | Arguments |
| Event | Description | Arguments |
|----------|------------------------|----------------------|
| onStart `v1.3.4` | File upload starts | options |
| start `v1.3.4 Abandon` | File upload starts | options |
| onStart `v1.3.4` | File upload starts| options|
| start `v1.3.4 Abandon` | File upload starts| options|
| onProgress `v1.3.4` | The progress of the file upload | event,options,percentage |
| progress `v1.3.4 Abandon` | The progress of the file upload | event,options,percentage |
| onOversize `v1.3.4` | Triggered when the file size exceeds the limit | files |
| oversize `v1.3.4 Abandon` | Triggered when the file size exceeds the limit | files |
| onSuccess `v1.3.4` | Uploaded successfully | responseText,options |
| success `v1.3.4 Abandon` | Uploaded successfully | responseText,options |
| onFailure `v1.3.4` | Upload failed | responseText,options |
| failure `v1.3.4 Abandon` | Upload failed | responseText,options |
| onOversize `v1.3.4` | Triggered when the file size exceeds the limit | files|
| oversize `v1.3.4 Abandon` | Triggered when the file size exceeds the limit | files|
| onSuccess `v1.3.4` | Uploaded successfully | responseText,options |
| success `v1.3.4 Abandon` | Uploaded successfully | responseText,options |
| onFailure `v1.3.4` | Upload failed | responseText,options |
| failure `v1.3.4 Abandon` | Upload failed | responseText,options |
| onChange `v1.3.4` | The state when the uploaded file changes | fileList,event |
| change `v1.3.4 Abandon` | The state when the uploaded file changes | fileList,event |
| onRemove `v1.3.4` | The state before the file was deleted | files,fileList |
......@@ -383,7 +382,6 @@ export default App;
| fileItemClick `v1.3.4 Abandon` | File delete event | fileItem |
## Theming
### CSS Variables
......@@ -394,4 +392,20 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- |
| --nutui-uploader-picture-width | ` 100px` |
| --nutui-uploader-picture-height | ` 100px` |
| --nutui-uploader-picture-border`v1.4.9` | ` 0px` |
| --nutui-uploader-picture-border-radius`v1.4.9` | ` 4px` |
| --nutui-uploader-background | ` $gray4` |
| --nutui-uploader-background-disabled`v1.4.9` | ` $gray4` |
| --nutui-uploader-picture-icon-opacity`v1.4.9` | ` 0.7` |
| --nutui-uploader-picture-icon-opacity-disabled`v1.4.9` | ` 0.3`|
| --nutui-uploader-picture-icon-margin-bottom`v1.4.9` | ` 6px`|
| --nutui-uploader-picture-icon-tip-font-size`v1.4.9` | ` 12px`|
| --nutui-uploader-picture-icon-tip-color`v1.4.9` | ` #BFBFBF`|
| --nutui-uploader-preview-progress-background`v1.4.9` | ` rgba(0, 0, 0, 0.65)`|
| --nutui-uploader-preview-margin-right`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-margin-bottom`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-tips-height`v1.4.9` | ` 24px`|
| --nutui-uploader-preview-tips-background`v1.4.9` | ` rgba(0, 0, 0, 0.45)`|
| --nutui-uploader-preview-tips-padding`v1.4.9` | ` 0 5px`|
| --nutui-uploader-preview-close-right`v1.4.9` | ` 0px`|
| --nutui-uploader-preview-close-top`v1.4.9` | ` 0px`|
src/packages/uploader/doc.md
浏览文件 @ b5415811
......@@ -24,7 +24,19 @@ const App = () => {
return (
<>
<h2>基础用法</h2>
<Uploader url={uploadUrl} start={onStart} />
<Uploader
url={uploadUrl}
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader
url={uploadUrl}
uploadIconSize="20px"
uploadIconTip="商品主图"
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader url={uploadUrl} uploadIcon="dongdong" onStart={onStart} />
</>
)
}
......@@ -42,6 +54,14 @@ import { Uploader } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const defaultFileList: FileType<string>[] = [
{
name: '文件文件文件1.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'success',
message: '上传成功',
type: 'image',
uid: '123',
},
{
name: '文件1.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
......@@ -51,21 +71,40 @@ const App = () => {
uid: '123',
},
{
name: '文件2.png',
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'error',
message: '上传失败',
type: 'image',
uid: '124',
errorIcon: 'star',
},
{
name: '文件3.png',
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中...',
message: '上传中',
type: 'image',
uid: '125',
},
{
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中',
type: 'image',
uid: '125',
loadingIcon: 'loading1',
},
{
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中',
type: 'image',
uid: '125',
loadingIcon: ' ',
},
]
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log(translated.ca3903f3, file, fileList)
......@@ -77,8 +116,6 @@ const App = () => {
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
</>
......@@ -318,49 +355,49 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| autoUpload `v1.3.4` | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| defaultFileList | 默认已经上传的文件列表 | FileItem[] | [] |
| isPreview | 是否上传成功后展示预览图 | Boolean | true |
| defaultImg | 当上传非图片('image')格式的默认图片地址 | String | '' |
| isDeletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| listType `v1.3.4` | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} |
| uploadIcon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| uploadIconSize `v1.3.4` | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
| xhrState | 接口响应的成功状态（status）值 | Number | 200 |
| withCredentials | 支持发送 cookie 凭证信息 | Boolean | false |
| multiple | 是否支持文件多选 | Boolean | false |
| disabled | 是否禁用文件上传 | Boolean | false |
| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| beforeUpload `v1.3.4 废弃` | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| onBeforeUpload `v1.3.4` | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| onBeforeXhrUpload `v1.3.4` | 执行 XHR 上传时，自定义方式 | Function(xhr，option) | null |
| beforeDelete `v1.3.4 废弃` | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| onBeforeDelete `v1.3.4` | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| 字段| 说明| 类型| 默认值|
|---------|------|--------|----------|
| autoUpload `v1.3.4`| 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传| Boolean| true |
| name| `input` 标签 `name` 的名称，发到后台的文件参数名| String| "file"|
| url| 上传服务器的接口地址| String | -|
| defaultFileList| 默认已经上传的文件列表| FileItem[]| [] |
| isPreview| 是否上传成功后展示预览图| Boolean | true|
| defaultImg| 当上传非图片('image')格式的默认图片地址| String| '' |
| isDeletable| 是否展示删除按钮| Boolean| true|
| method| 上传请求的 http method| String| "post" |
| listType `v1.3.4`| 上传列表的内建样式，支持两种基本样式 picture、list| String| "picture"|
| capture| 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头| String| false |
| maximize| 可以设定最大上传文件的大小（字节）| Number丨String| Number.MAX_VALUE |
| maximum| 文件上传数量限制| Number丨String| 1|
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件| Boolean| true |
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String| *|
| headers | 设置上传的请求头部| Object| {}|
| data| 附加上传的信息 formData| Object| {}|
| uploadIcon| 上传区域[图标名称](#/zh-CN/icon)或图片链接| String| "photograph"|
| uploadIconSize `v1.3.4`| 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem`| String or Number| - |
| uploadIconTip`v1.4.9`| 上传区域图片下方文字| String| ""|
| xhrState| 接口响应的成功状态（status）值| Number| 200|
| withCredentials | 支持发送 cookie 凭证信息| Boolean| false|
| multiple| 是否支持文件多选| Boolean| false|
| disabled| 是否禁用文件上传| Boolean| false|
| timeout| 超时时间，单位为毫秒| Number丨String| 1000 * 30|
| beforeUpload `v1.3.4 废弃`| 上传前的函数需要返回一个`Promise`对象| Function| null|
| onBeforeUpload `v1.3.4`| 上传前的函数需要返回一个`Promise`对象| Function| null|
| onBeforeXhrUpload `v1.3.4` | 执行 XHR 上传时，自定义方式| Function(xhr，option)| null|
| beforeDelete `v1.3.4 废弃` | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除| Function(file): boolean 丨Promise | - |
| onBeforeDelete `v1.3.4` | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除| Function(file): boolean 丨Promise | -|
### FileItem
| 名称 | 说明 | 默认值 |
|----------|---------------------------------------------------------|---------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
| 名称 | 说明| 默认值|
|----------|-------------|-------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready"|
| uid | 文件的唯一标识| new Date().getTime().toString() |
| name | 文件名称| ""|
| url | 文件路径| ""|
| type | 文件类型| "image/jpeg"|
| formData | 上传所需的data| new FormData()|
### Event
......@@ -383,7 +420,6 @@ export default App;
| onFileItemClick `v1.3.4` | 文件上传成功后点击触发 | fileItem |
## 主题定制
### 样式变量
......@@ -394,4 +430,20 @@ export default App;
| --- | --- |
| --nutui-uploader-picture-width | ` 100px` |
| --nutui-uploader-picture-height | ` 100px` |
| --nutui-uploader-picture-border`v1.4.9` | ` 0px` |
| --nutui-uploader-picture-border-radius`v1.4.9` | ` 4px` |
| --nutui-uploader-background | ` $gray4` |
| --nutui-uploader-background-disabled`v1.4.9` | ` $gray4` |
| --nutui-uploader-picture-icon-opacity`v1.4.9` | ` 0.7` |
| --nutui-uploader-picture-icon-opacity-disabled`v1.4.9` | ` 0.3`|
| --nutui-uploader-picture-icon-margin-bottom`v1.4.9` | ` 6px`|
| --nutui-uploader-picture-icon-tip-font-size`v1.4.9` | ` 12px`|
| --nutui-uploader-picture-icon-tip-color`v1.4.9` | ` #BFBFBF`|
| --nutui-uploader-preview-progress-background`v1.4.9` | ` rgba(0, 0, 0, 0.65)`|
| --nutui-uploader-preview-margin-right`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-margin-bottom`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-tips-height`v1.4.9` | ` 24px`|
| --nutui-uploader-preview-tips-background`v1.4.9` | ` rgba(0, 0, 0, 0.45)`|
| --nutui-uploader-preview-tips-padding`v1.4.9` | ` 0 5px`|
| --nutui-uploader-preview-close-right`v1.4.9` | ` 0px`|
| --nutui-uploader-preview-close-top`v1.4.9` | ` 0px`|
src/packages/uploader/doc.taro.md
浏览文件 @ b5415811
......@@ -23,7 +23,19 @@ const App = () => {
return (
<>
<h2>基础用法</h2>
<Uploader url={uploadUrl} start={onStart} />
<Uploader
url={uploadUrl}
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader
url={uploadUrl}
uploadIconSize="20px"
uploadIconTip="商品主图"
onStart={onStart}
style={{ marginRight: '10px' }}
/>
<Uploader url={uploadUrl} uploadIcon="dongdong" onStart={onStart} />
</>
)
}
......@@ -39,6 +51,14 @@ import { Uploader } from '@nutui/nutui-react-taro';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const defaultFileList: FileType<string>[] = [
{
name: '文件文件文件1.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'success',
message: '上传成功',
type: 'image',
uid: '123',
},
{
name: '文件1.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
......@@ -48,21 +68,40 @@ const App = () => {
uid: '123',
},
{
name: '文件2.png',
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'error',
message: '上传失败',
type: 'image',
uid: '124',
errorIcon: 'star',
},
{
name: '文件3.png',
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中...',
message: '上传中',
type: 'image',
uid: '125',
},
{
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中',
type: 'image',
uid: '125',
loadingIcon: 'loading1',
},
{
name: '文件4.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中',
type: 'image',
uid: '125',
loadingIcon: ' ',
},
]
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log(translated.ca3903f3, file, fileList)
......@@ -74,8 +113,6 @@ const App = () => {
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
</>
......@@ -325,54 +362,54 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| autoUpload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| defaultFileList | 默认已经上传的文件列表 | FileItem[] | [] |
| isPreview | 是否上传成功后展示预览图 | Boolean | true |
| defaultImg | 当上传非图片('image')格式的默认图片地址 | String | '' |
| isDeletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| listType | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
| headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} |
| uploadIcon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| uploadIconSize | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
| xhrState | 接口响应的成功状态（status）值 | Number | 200 |
| disabled | 是否禁用文件上传 | Boolean | false |
| multiple`v1.4.8` | 是否支持文件多选 | Boolean | false |
| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| onBeforeUpload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| onBeforeXhrUpload | 执行 XHR 上传时，自定义方式 | Function(xhr，option) | null |
| onBeforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| 字段| 说明| 类型| 默认值|
|-------------------|--------------|------------------|------------------|
| autoUpload| 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传| Boolean | true|
| name | `input` 标签 `name` 的名称，发到后台的文件参数名| String | "file"|
| url| 上传服务器的接口地址 | String | - |
| defaultFileList| 默认已经上传的文件列表 | FileItem[] | [] |
| isPreview | 是否上传成功后展示预览图| Boolean | true |
| defaultImg | 当上传非图片('image')格式的默认图片地址| String | '' |
| isDeletable | 是否展示删除按钮| Boolean | true |
| method | 上传请求的 http method | String | "post"|
| listType | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture"|
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum| 文件上传数量限制| Number丨String | 1 |
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
| headers| 设置上传的请求头部 | Object | {}|
| data | 附加上传的信息 formData | Object | {}|
| uploadIcon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| uploadIconSize | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
| uploadIconTip`v1.4.9`| 上传区域图片下方文字| String| ""|
| xhrState | 接口响应的成功状态（status）值 | Number | 200 |
| disabled | 是否禁用文件上传| Boolean | false |
| multiple`v1.4.8` | 是否支持文件多选| Boolean | false |
| timeout| 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| onBeforeUpload | 上传前的函数需要返回一个`Promise`对象| Function| null |
| onBeforeXhrUpload | 执行 XHR 上传时，自定义方式| Function(xhr，option)| null |
| onBeforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
### FileItem
| 名称 | 说明 | 默认值 |
| 名称 | 说明 | 默认值|
|----------|---------------------------------------------------------|---------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | ""|
| url | 文件路径 | ""|
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
### Event
| 名称 | 说明 | 回调参数 |
| 名称 | 说明 | 回调参数 |
|----------|------------------------|----------------------|
| onStart | 文件上传开始 | options |
| onStart | 文件上传开始| options |
| onProgress | 文件上传的进度 | event,options,percentage |
| onOversize | 文件大小超过限制时触发 | files |
| onSuccess | 上传成功 | responseText,options |
| onFailure | 上传失败 | responseText,options |
| onOversize | 文件大小超过限制时触发 | files |
| onSuccess | 上传成功| responseText,options |
| onFailure | 上传失败| responseText,options |
| onChange | 上传文件改变时的状态 | fileList,event |
| onRemove | 文件删除之前的状态 | files,fileList |
| onFileItemClick | 文件上传成功后点击触发 | fileItem |
......@@ -389,4 +426,20 @@ export default App;
| --- | --- |
| --nutui-uploader-picture-width | ` 100px` |
| --nutui-uploader-picture-height | ` 100px` |
| --nutui-uploader-picture-border`v1.4.9` | ` 0px` |
| --nutui-uploader-picture-border-radius`v1.4.9` | ` 4px` |
| --nutui-uploader-background | ` $gray4` |
| --nutui-uploader-background-disabled`v1.4.9` | ` $gray4` |
| --nutui-uploader-picture-icon-opacity`v1.4.9` | ` 0.7` |
| --nutui-uploader-picture-icon-opacity-disabled`v1.4.9` | ` 0.3`|
| --nutui-uploader-picture-icon-margin-bottom`v1.4.9` | ` 6px`|
| --nutui-uploader-picture-icon-tip-font-size`v1.4.9` | ` 12px`|
| --nutui-uploader-picture-icon-tip-color`v1.4.9` | ` #BFBFBF`|
| --nutui-uploader-preview-progress-background`v1.4.9` | ` rgba(0, 0, 0, 0.65)`|
| --nutui-uploader-preview-margin-right`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-margin-bottom`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-tips-height`v1.4.9` | ` 24px`|
| --nutui-uploader-preview-tips-background`v1.4.9` | ` rgba(0, 0, 0, 0.45)`|
| --nutui-uploader-preview-tips-padding`v1.4.9` | ` 0 5px`|
| --nutui-uploader-preview-close-right`v1.4.9` | ` 0px`|
| --nutui-uploader-preview-close-top`v1.4.9` | ` 0px`|
\ No newline at end of file
src/packages/uploader/doc.zh-TW.md
浏览文件 @ b5415811
......@@ -77,8 +77,6 @@ const App = () => {
url={uploadUrl}
defaultFileList={defaultFileList}
onRemove={onDelete}
maximum="3"
multiple
uploadIcon="dongdong"
/>
</>
......@@ -318,64 +316,65 @@ export default App;
### Prop
| 字段 | 說明 | 類型 | 默認值 |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| autoUpload `v1.3.4` | 是否在選取文件後立即進行上傳，false 時需要手動執行 ref submit 方法進行上傳 | Boolean | true |
| name | `input` 標籤 `name` 的名稱，發到後台的文件參數名 | String | "file" |
| url | 上傳服務器的接口地址 | String | - |
| defaultFileList | 默認已經上傳的文件列表 | FileItem[] | [] |
| isPreview | 是否上傳成功後展示預覽圖 | Boolean | true |
| defaultImg | 當上傳非圖片('image')格式的默認圖片地址 | String | '' |
| isDeletable | 是否展示刪除按鈕 | Boolean | true |
| method | 上傳請求的 http method | String | "post" |
| listType `v1.3.4` | 上傳列表的內建樣式，支持兩種基本樣式 picture、list | String | "picture" |
| capture | 圖片[選取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接調起攝像頭 | String | false |
| maximize | 可以設定最大上傳文件的大小（字節） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上傳數量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`內容，設為`true`支持重複選擇上傳同一個文件 | Boolean | false |
| accept | 允許上傳的文件類型，[詳細說明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | 設置上傳的請求頭部 | Object | {} |
| data | 附加上傳的信息 formData | Object | {} |
| uploadIcon | 上傳區域[圖標名稱](#/zh-CN/icon)或圖片鏈接 | String | "photograph" |
| uploadIconSize `v1.3.4` | 上傳區域[圖標尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
| xhrState | 接口響應的成功狀態（status）值 | Number | 200 |
| withCredentials | 支持發送 cookie 憑證信息 | Boolean | fasle |
| multiple | 是否支持文件多選 | Boolean | fasle |
| disabled | 是否禁用文件上傳 | Boolean | fasle |
| timeout | 超時時間，單位為毫秒 | Number丨String | 1000 * 30 |
| beforeUpload `v1.3.4廢棄` | 上傳前的函數需要返回一個`Promise`對象 | Function | null |
| onBeforeUpload `v1.3.4` | 上傳前的函數需要返回一個`Promise`對象 | Function | null |
| onBeforeXhrUpload `v1.3.4` | 執行 XHR 上傳時，自定義方式 | Function(xhr，option) | null |
| beforeDelete `v1.3.4 廢棄` | 除文件時的回調，返回值為 false 時不移除。支持返回一個 `Promise` 對象，`Promise` 對象 resolve(false) 或 reject 時不移除 | Function(file): boolean 丨Promise | - |
| onBeforeDelete `v1.3.4` | 除文件時的回調，返回值為 false 時不移除。支持返回一個 `Promise` 對象，`Promise` 對象 resolve(false) 或 reject 時不移除 | Function(file): boolean 丨Promise | - |
| 字段| 說明| 類型 | 默認值|
|-------------------|----------------|---------------------|------------------|
| autoUpload `v1.3.4` | 是否在選取文件後立即進行上傳，false 時需要手動執行 ref submit 方法進行上傳 | Boolean| true|
| name| `input` 標籤 `name` 的名稱，發到後台的文件參數名 | String| "file"|
| url | 上傳服務器的接口地址 | String| - |
| defaultFileList | 默認已經上傳的文件列表 | FileItem[]| [] |
| isPreview | 是否上傳成功後展示預覽圖 | Boolean | true |
| defaultImg | 當上傳非圖片('image')格式的默認圖片地址 | String | '' |
| isDeletable | 是否展示刪除按鈕 | Boolean | true |
| method | 上傳請求的 http method | String | "post"|
| listType `v1.3.4` | 上傳列表的內建樣式，支持兩種基本樣式 picture、list | String | "picture"|
| capture| 圖片[選取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接調起攝像頭| String | false |
| maximize | 可以設定最大上傳文件的大小（字節） | Number丨String | Number.MAX_VALUE |
| maximum| 文件上傳數量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`內容，設為`true`支持重複選擇上傳同一個文件 | Boolean | false |
| accept | 允許上傳的文件類型，[詳細說明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers| 設置上傳的請求頭部| Object | {} |
| data | 附加上傳的信息 formData | Object | {} |
| uploadIcon | 上傳區域[圖標名稱](#/zh-CN/icon)或圖片鏈接| String | "photograph" |
| uploadIconSize `v1.3.4` | 上傳區域[圖標尺寸](#/icon)大小，如 `20px` `2em` `2rem`| String or Number | - |
| uploadIconTip`v1.4.9`| 上傳區域圖片下方文字| String| ""|
| xhrState | 接口響應的成功狀態（status）值 | Number | 200 |
| withCredentials | 支持發送 cookie 憑證信息 | Boolean | fasle |
| multiple | 是否支持文件多選 | Boolean | fasle |
| disabled | 是否禁用文件上傳 | Boolean | fasle |
| timeout| 超時時間，單位為毫秒 | Number丨String | 1000 * 30 |
| beforeUpload `v1.3.4廢棄` | 上傳前的函數需要返回一個`Promise`對象 | Function | null |
| onBeforeUpload `v1.3.4` | 上傳前的函數需要返回一個`Promise`對象 | Function | null |
| onBeforeXhrUpload `v1.3.4` | 執行 XHR 上傳時，自定義方式 | Function(xhr，option) | null |
| beforeDelete `v1.3.4 廢棄` | 除文件時的回調，返回值為 false 時不移除。支持返回一個 `Promise` 對象，`Promise` 對象 resolve(false) 或 reject 時不移除 | Function(file): boolean 丨Promise | - |
| onBeforeDelete `v1.3.4` | 除文件時的回調，返回值為 false 時不移除。支持返回一個 `Promise` 對象，`Promise` 對象 resolve(false) 或 reject 時不移除 | Function(file): boolean 丨Promise | - |
### FileItem
| 名稱 | 說明 | 默認值 |
|----------|---------------------------------------------------------|---------------------------------|
| status | 文件狀態值，可選'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一標識 | new Date().getTime().toString() |
| name | 文件名稱 | "" |
| url | 文件路徑 | "" |
| type | 文件類型 | "image/jpeg" |
| formData | 上傳所需的data | new FormData() |
| 名稱 | 說明 | 默認值 |
|----------|------------------|----------------|
| status | 文件狀態值，可選'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一標識 | new Date().getTime().toString() |
| name | 文件名稱| "" |
| url | 文件路徑| "" |
| type | 文件類型| "image/jpeg" |
| formData | 上傳所需的data | new FormData() |
### Event
| 名稱 | 說明 | 回調參數 |
| 名稱 | 說明 | 回調參數 |
|----------|------------------------|----------------------|
| onStart `v1.3.4` | 文件上傳開始 | options |
| start `v1.3.4廢棄` | 文件上傳開始 | options |
| onStart `v1.3.4` | 文件上傳開始| options |
| start `v1.3.4廢棄` | 文件上傳開始| options |
| onProgress `v1.3.4` | 文件上傳的進度 | event,options,percentage |
| progress `v1.3.4廢棄` | 文件上傳的進度 | event,options,percentage |
| onOversize `v1.3.4` | 文件大小超過限制時觸發 | files |
| oversize `v1.3.4廢棄` | 文件大小超過限制時觸發 | files |
| onSuccess `v1.3.4` | 上傳成功 | responseText,options |
| success `v1.3.4廢棄` | 上傳成功 | responseText,options |
| onFailure `v1.3.4` | 上傳失敗 | responseText,options |
| failure `v1.3.4廢棄` | 上傳失敗 | responseText,options |
| onOversize `v1.3.4` | 文件大小超過限制時觸發 | files |
| oversize `v1.3.4廢棄` | 文件大小超過限制時觸發 | files |
| onSuccess `v1.3.4` | 上傳成功 | responseText,options |
| success `v1.3.4廢棄` | 上傳成功 | responseText,options |
| onFailure `v1.3.4` | 上傳失敗 | responseText,options |
| failure `v1.3.4廢棄` | 上傳失敗 | responseText,options |
| onChange `v1.3.4` | 上傳文件改變時的狀態 | fileList,event |
| change `v1.3.4廢棄` | 上傳文件改變時的狀態 | fileList,event |
| onRemove `v1.3.4` | 文件刪除之前的狀態 | files,fileList |
......@@ -384,7 +383,6 @@ export default App;
| fileItemClick `v1.3.4廢棄` | 文件上傳成功後點擊觸發 | fileItem |
## 主題定制
### 樣式變量
......@@ -395,4 +393,20 @@ export default App;
| --- | --- |
| --nutui-uploader-picture-width | ` 100px` |
| --nutui-uploader-picture-height | ` 100px` |
| --nutui-uploader-picture-border`v1.4.9` | ` 0px` |
| --nutui-uploader-picture-border-radius`v1.4.9` | ` 4px` |
| --nutui-uploader-background | ` $gray4` |
| --nutui-uploader-background-disabled`v1.4.9` | ` $gray4` |
| --nutui-uploader-picture-icon-opacity`v1.4.9` | ` 0.7` |
| --nutui-uploader-picture-icon-opacity-disabled`v1.4.9` | ` 0.3`|
| --nutui-uploader-picture-icon-margin-bottom`v1.4.9` | ` 6px`|
| --nutui-uploader-picture-icon-tip-font-size`v1.4.9` | ` 12px`|
| --nutui-uploader-picture-icon-tip-color`v1.4.9` | ` #BFBFBF`|
| --nutui-uploader-preview-progress-background`v1.4.9` | ` rgba(0, 0, 0, 0.65)`|
| --nutui-uploader-preview-margin-right`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-margin-bottom`v1.4.9` | ` 10px`|
| --nutui-uploader-preview-tips-height`v1.4.9` | ` 24px`|
| --nutui-uploader-preview-tips-background`v1.4.9` | ` rgba(0, 0, 0, 0.45)`|
| --nutui-uploader-preview-tips-padding`v1.4.9` | ` 0 5px`|
| --nutui-uploader-preview-close-right`v1.4.9` | ` 0px`|
| --nutui-uploader-preview-close-top`v1.4.9` | ` 0px`|
src/packages/uploader/uploader.scss
浏览文件 @ b5415811
@import '../icon/icon.scss';
@import '../../styles/mixins/text-ellipsis.scss';
.nut-theme-dark {
.nut-uploader {
// background-color: $gray2;
&__preview {
margin-bottom: 0;
&-img {
i {
color: $dark1 !important;
......@@ -12,16 +14,19 @@
}
}
}
.nut-progress {
.nut-progress-text__inner {
color: $white !important;
}
}
.nut-uploader__preview-list {
background: $dark5;
color: $dark1;
}
}
.nut-uploader {
position: relative;
display: flex;
......@@ -33,12 +38,31 @@
&__upload {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: $uploader-background;
width: $uploader-picture-width;
height: $uploader-picture-height;
border: $uploader-picture-border;
border-radius: $uploader-picture-border-radius;
}
&__icon {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
i {
opacity: $uploader-picture-icon-opacity;
margin-bottom: $uploader-picture-icon-margin-bottom;
}
&-tip {
font-size: $uploader-picture-icon-tip-font-size;
color: $uploader-picture-icon-tip-color;
}
}
&__input {
......@@ -50,49 +74,67 @@
overflow: hidden;
cursor: pointer !important;
opacity: 0;
&:disabled {
cursor: not-allowed;
}
}
&__upload-disabled {
background: $uploader-background-disabled;
.nut-uploader__icon {
i {
opacity: $uploader-picture-icon-opacity-disabled;
margin-bottom: $uploader-picture-icon-margin-bottom;
}
}
}
&__preview {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
margin-right: $uploader-preview-margin-right;
margin-bottom: $uploader-preview-margin-bottom;
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
&__progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: $uploader-preview-progress-background;
border-radius: $uploader-picture-border-radius;
i {
margin-bottom: $uploader-picture-icon-margin-bottom;
}
&__msg {
color: #fff;
font-size: 12px;
margin-top: 6px;
}
}
&.list {
width: 100%;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 10px;
}
&-list {
width: 100%;
height: 32px;
display: flex;
flex-direction: column;
position: relative;
padding-right: 20px;
background-color: $gray4;
background-color: $gray5;
.nut-uploader__preview-img__file__name {
-webkit-line-clamp: 1;
padding: 2px;
......@@ -104,49 +146,58 @@
right: 4px;
top: 6px;
}
.nut-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
.nut-progress-outer {
height: 2px !important;
}
}
}
.close {
position: absolute;
right: $uploader-preview-close-right;
top: $uploader-preview-close-top;
transform: translate(50%, -50%);
}
&-img {
position: relative;
width: $uploader-picture-width;
height: $uploader-picture-height;
border-radius: $uploader-picture-border-radius;
i {
color: $gray1;
}
.close {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.tips {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: $white;
height: 0px;
transition: height 0.3s;
background: rgba(0, 0, 0, 0.54);
text-align: center;
height: $uploader-preview-tips-height;
line-height: $uploader-preview-tips-height;
border-radius: $uploader-picture-border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: $uploader-preview-tips-padding;
background: $uploader-preview-tips-background;
@include oneline-ellipsis();
}
&__c {
height: 100%;
width: 100%;
}
&__file {
height: 100%;
width: 100%;
......@@ -160,12 +211,15 @@
width: 100%;
font-size: 12px;
color: $text-color;
&.error {
color: red !important;
}
&.success {
color: #1890ff !important;
}
.nut-icon-link {
&::before {
margin-left: -25%;
......@@ -173,6 +227,7 @@
transform: none;
}
}
@include moreline-ellipsis();
}
}
......
src/packages/uploader/uploader.taro.tsx
浏览文件 @ b5415811
......@@ -55,6 +55,7 @@ export interface UploaderProps extends BasicComponent {
listType: string
uploadIcon: string
uploadIconSize: string | number
uploadIconTip: string
name: string
disabled: boolean
autoUpload: boolean
......@@ -101,6 +102,7 @@ const defaultProps = {
sourceType: ['album', 'camera'],
uploadIcon: 'photograph',
uploadIconSize: '',
uploadIconTip: '',
listType: 'picture',
name: 'file',
disabled: false,
......@@ -148,10 +150,12 @@ const InternalUploader: ForwardRefRenderFunction<
children,
uploadIcon,
uploadIconSize,
uploadIconTip,
name,
defaultFileList,
listType,
disabled,
multiple,
url,
defaultImg,
headers,
......@@ -163,11 +167,13 @@ const InternalUploader: ForwardRefRenderFunction<
isDeletable,
maximum,
maximize,
multiple,
className,
autoUpload,
sizeType,
sourceType,
iconClassPrefix,
iconFontClassName,
onStart,
onRemove,
onChange,
......@@ -429,6 +435,16 @@ const InternalUploader: ForwardRefRenderFunction<
<div className={`nut-uploader__preview ${listType}`} key={item.uid}>
{listType === 'picture' && !children && (
<div className="nut-uploader__preview-img">
{isDeletable && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="rgba(0,0,0,0.6)"
className="close"
name="failure"
onClick={() => onDelete(item, index)}
/>
)}
{item.status === 'ready' ? (
<div className="nut-uploader__preview__progress">
<div className="nut-uploader__preview__progress__msg">
......@@ -438,32 +454,25 @@ const InternalUploader: ForwardRefRenderFunction<
) : (
item.status !== 'success' && (
<div className="nut-uploader__preview__progress">
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
color="#fff"
name={`${
item.status === 'error' ? 'failure' : 'loading'
}`}
/>
{item.failIcon === ' ' ||
item.loadingIcon === ' ' ? null : (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="#fff"
name={`${
item.status === 'error'
? `${item.failIcon || 'failure'}`
: `${item.loadingIcon || 'loading'}`
}`}
/>
)}
<div className="nut-uploader__preview__progress__msg">
{item.message}
</div>
</div>
)
)}
{isDeletable && (
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
color="rgba(0,0,0,0.6)"
className="close"
name="failure"
onClick={() => onDelete(item, index)}
/>
)}
{item.type.includes('image') ? (
<>
{item.url && (
......@@ -491,8 +500,8 @@ const InternalUploader: ForwardRefRenderFunction<
className="nut-uploader__preview-img__file__name"
>
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="#808080"
name="link"
/>
......@@ -503,7 +512,9 @@ const InternalUploader: ForwardRefRenderFunction<
)}
</>
)}
<div className="tips">{item.name}</div>
{item.status === 'success' ? (
<div className="tips">{item.name}</div>
) : null}
</div>
)}
......@@ -514,16 +525,16 @@ const InternalUploader: ForwardRefRenderFunction<
onClick={() => handleItemClick(item)}
>
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name="link"
/>
&nbsp;{item.name}
</div>
{isDeletable && (
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="#808080"
className="nut-uploader__preview-img__file__del"
name="del"
......@@ -545,14 +556,21 @@ const InternalUploader: ForwardRefRenderFunction<
})}
{maximum > fileList.length && listType === 'picture' && !children && (
<div className={`nut-uploader__upload ${listType}`}>
<Icon
classPrefix={props.iconClassPrefix}
fontClassName={props.iconFontClassName}
size={uploadIconSize}
color="#808080"
name={uploadIcon}
/>
<div
className={`nut-uploader__upload ${listType} ${
disabled ? 'nut-uploader__upload-disabled' : ''
}`}
>
<div className="nut-uploader__icon">
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={uploadIconSize}
color="#808080"
name={uploadIcon}
/>
<span className="nut-uploader__icon-tip">{uploadIconTip}</span>
</div>
<Button className="nut-uploader__input" onClick={_chooseImage} />
</div>
)}
......
src/packages/uploader/uploader.tsx
浏览文件 @ b5415811
......@@ -12,6 +12,8 @@ import { Upload, UploadOptions } from './upload'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
export type FileType<T> = { [key: string]: T }
export type FileItemStatus =
......@@ -21,8 +23,6 @@ export type FileItemStatus =
| 'error'
| 'removed'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
export interface UploaderProps extends BasicComponent {
url: string
maximum: string | number
......@@ -31,6 +31,7 @@ export interface UploaderProps extends BasicComponent {
listType: string
uploadIcon: string
uploadIconSize: string | number
uploadIconTip: string
name: string
accept: string
disabled: boolean
......@@ -82,6 +83,7 @@ const defaultProps = {
maximum: 1,
uploadIcon: 'photograph',
uploadIconSize: '',
uploadIconTip: '',
listType: 'picture',
name: 'file',
accept: '*',
......@@ -133,6 +135,7 @@ const InternalUploader: ForwardRefRenderFunction<
children,
uploadIcon,
uploadIconSize,
uploadIconTip,
name,
accept,
defaultFileList,
......@@ -441,6 +444,17 @@ const InternalUploader: ForwardRefRenderFunction<
<div className={`nut-uploader__preview ${listType}`} key={item.uid}>
{listType === 'picture' && !children && (
<div className="nut-uploader__preview-img">
{isDeletable && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="rgba(0,0,0,0.6)"
className="close"
name="failure"
onClick={() => onDelete(item, index)}
/>
)}
{item.status === 'ready' ? (
<div className="nut-uploader__preview__progress">
<div className="nut-uploader__preview__progress__msg">
......@@ -450,14 +464,20 @@ const InternalUploader: ForwardRefRenderFunction<
) : (
item.status !== 'success' && (
<div className="nut-uploader__preview__progress">
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="#fff"
name={`${
item.status === 'error' ? 'failure' : 'loading'
}`}
/>
{item.failIcon === ' ' ||
item.loadingIcon === ' ' ? null : (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="#fff"
name={`${
item.status === 'error'
? `${item.failIcon || 'failure'}`
: `${item.loadingIcon || 'loading'}`
}`}
/>
)}
<div className="nut-uploader__preview__progress__msg">
{item.message}
</div>
......@@ -465,17 +485,6 @@ const InternalUploader: ForwardRefRenderFunction<
)
)}
{isDeletable && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
color="rgba(0,0,0,0.6)"
className="close"
name="failure"
onClick={() => onDelete(item, index)}
/>
)}
{item.type.includes('image') ? (
<>
{item.url && (
......@@ -515,7 +524,9 @@ const InternalUploader: ForwardRefRenderFunction<
)}
</>
)}
<div className="tips">{item.name}</div>
{item.status === 'success' ? (
<div className="tips">{item.name}</div>
) : null}
</div>
)}
......@@ -558,14 +569,22 @@ const InternalUploader: ForwardRefRenderFunction<
})}
{maximum > fileList.length && listType === 'picture' && !children && (
<div className={`nut-uploader__upload ${listType}`}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={uploadIconSize}
color="#808080"
name={uploadIcon}
/>
<div
className={`nut-uploader__upload ${listType} ${
disabled ? 'nut-uploader__upload-disabled' : ''
}`}
>
<div className="nut-uploader__icon">
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={uploadIconSize}
color="#808080"
name={uploadIcon}
/>
<span className="nut-uploader__icon-tip">{uploadIconTip}</span>
</div>
{capture ? (
<input
className="nut-uploader__input"
......
src/styles/variables.scss
浏览文件 @ b5415811
......@@ -346,7 +346,68 @@ $icon-line-height: var(--nutui-icon-line-height, 20px) !default;
$uploader-picture-width: var(--nutui-uploader-picture-width, 100px) !default;
$uploader-picture-height: var(--nutui-uploader-picture-height, 100px) !default;
$uploader-picture-border: var(--nutui-uploader-picture-border, 0px) !default;
$uploader-picture-border-radius: var(
--nutui-uploader-picture-border-radius,
2px
) !default;
$uploader-background: var(--nutui-uploader-background, $gray4) !default;
$uploader-background-disabled: var(
--nutui-uploader-background-disabled,
$gray4
) !default;
$uploader-picture-icon-opacity: var(
--nutui-uploader-picture-icon-opacity,
0.7
) !default;
$uploader-picture-icon-opacity-disabled: var(
--nutui-uploader-picture-icon-opacity-disabled,
0.3
) !default;
$uploader-picture-icon-margin-bottom: var(
--nutui-uploader-picture-icon-margin-bottom,
6px
) !default;
$uploader-picture-icon-tip-font-size: var(
--nutui-uploader-picture-icon-tip-font-size,
12px
) !default;
$uploader-picture-icon-tip-color: var(
--nutui-uploader-picture-icon-tip-color,
#bfbfbf
) !default;
$uploader-preview-progress-background: var(
--nutui-uploader-preview-progress-background,
rgba(0, 0, 0, 0.65)
) !default;
$uploader-preview-margin-right: var(
--nutui-uploader-preview-margin-right,
10px
) !default;
$uploader-preview-margin-bottom: var(
--nutui-uploader-preview-margin-bottom,
10px
) !default;
$uploader-preview-tips-height: var(
--nutui-uploader-preview-tips-height,
24px
) !default;
$uploader-preview-tips-background: var(
--nutui-uploader-preview-tips-background,
rgba(0, 0, 0, 0.45)
) !default;
$uploader-preview-tips-padding: var(
--nutui-uploader-preview-tips-padding,
0 5px
) !default;
$uploader-preview-close-right: var(
--nutui-uploader-preview-close-right,
0px
) !default;
$uploader-preview-close-top: var(
--nutui-uploader-preview-close-top,
0px
) !default;
// picker（✅）（todo:react版本picker组件dom元素类名变化较大，picker.scss暂不改动）
$picker-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或