@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/dentry/uploader/index.md

@@ -0,0 +1,745 @@
+---
+order: 27
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/uploader/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Uploader 上传 <Badge>2.0.0</Badge>
+
+
+用于将本地的图片或文件上传至服务器。
+
+## 引入
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { AddFill } from '@mijadesign/mobile-icons'
+import { FileItem, Uploader } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo1 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const onStart = () => {
+    console.log('start触发')
+  }
+  const [list, setList] = useState<FileItem[]>([])
+  return (
+    <>
+      <div style={{ marginBottom: '10px' }}>点击唤起相册支持拍照和添加图片</div>
+      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '12px' }}>
+        <Uploader
+          value={list}
+          onChange={(files) => {
+            const newFiles: FileItem[] = files.map((file) => ({
+              ...file,
+              status: 'success',
+            }))
+            setTimeout(() => {
+              setList(newFiles)
+            }, 2000)
+          }}
+          uploadIcon={<AddFill size={20} color="#006DFC" />}
+          uploadLabel={<div style={{ textAlign: 'center' }}>点击选择图片上传</div>}
+          onStart={onStart}
+        />
+        <Uploader url={uploadUrl} onStart={onStart} />
+        <Uploader url={uploadUrl} uploadIcon={<AddFill size={20} color="#006DFC" />} onStart={onStart} />
+      </div>
+    </>
+  )
+}
+export default Demo1
+
+```
+    >
+> 在使用Uploader组件上传文件时，可能会遇到响应文件信息中文乱码的问题。这通常发生在客户端与服务器端在处理文件编码时不一致的情况下。为了避免这种问题，建议确保服务器端读取文件的编码格式与客户端保持一致。
+
+```javascript
+import React from 'react'
+import { Uploader } from '@nutui/nutui-react'
+// Server Demo
+app.post('/upload', upload.single('file'), (req, res) => {
+  const fileEncoding = req.headers['x-file-encoding'] || 'UTF-8';
+  const fileContent = iconv.decode(Buffer.from(JSON.stringify(req.file), 'binary'), fileEncoding);
+  res.json({ success: true, message: 'File uploaded successfully', data: JSON.parse(fileContent) });
+});
+// Client Demo
+<Uploader url={uploadUrl} headers={{'x-file-encoding': 'UTF-8'}} />
+
+```
+
+### 基础用法
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const onStart = () => {
+    console.log('start触发')
+  }
+  return (
+    <div>
+      <Uploader previewType="list" url={uploadUrl} onStart={onStart} />
+    </div>
+  )
+}
+export default Demo2
+
+```
+    
+### 上传状态
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import { AddFill } from '@mijadesign/mobile-icons'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo3 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+
+  const onStart = () => {
+    console.log('start触发')
+  }
+
+  const colTitleStyle = {
+    fontSize: '12px',
+    marginBottom: '12px',
+  }
+
+  const onPreview = (currentUrl?: string) => {
+    Taro.previewImage({
+      current: currentUrl,
+      urls: currentUrl ? [currentUrl] : [],
+    })
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '12px' }}>
+      <div>
+        <div style={colTitleStyle}>默认态</div>
+        <Uploader
+          url={uploadUrl}
+          uploadIcon={<AddFill size={20} color="#006DFC" />}
+          uploadLabel={<div style={{ textAlign: 'center' }}>点击选择图片上传</div>}
+          onStart={onStart}
+        />
+      </div>
+      <div>
+        <div style={colTitleStyle}>上传中</div>
+        <Uploader
+          url={uploadUrl}
+          defaultValue={[
+            {
+              name: 'demo.jpg',
+              url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+              status: 'uploading',
+              message: '上传中',
+              type: 'image',
+              uid: '122',
+            },
+          ]}
+          onStart={onStart}
+        />
+      </div>
+
+      <div>
+        <div style={colTitleStyle}>上传失败</div>
+        <Uploader
+          url={uploadUrl}
+          defaultValue={[
+            {
+              name: '文件2.png',
+              url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+              status: 'error',
+              message: '上传失败',
+              type: 'image',
+              uid: '123',
+            },
+          ]}
+          onStart={onStart}
+          onFileItemClick={() => onPreview('https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF')}
+        />
+      </div>
+
+      <div>
+        <div style={colTitleStyle}>上传完成</div>
+        <Uploader
+          url={uploadUrl}
+          defaultValue={[
+            {
+              name: '文件名称超出可视区域',
+              url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+              status: 'success',
+              message: '上传成功',
+              type: 'image',
+              uid: '125',
+            },
+          ]}
+          onStart={onStart}
+          onFileItemClick={() => onPreview('https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF')}
+        />
+      </div>
+
+      <div>
+        <div style={colTitleStyle}>上传完成无删除</div>
+        <Uploader
+          url={uploadUrl}
+          defaultValue={[
+            {
+              name: '文件名称超出可视区域',
+              url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+              status: 'success',
+              message: '上传成功',
+              type: 'image',
+              uid: '125',
+            },
+          ]}
+          onStart={onStart}
+          deletable={false}
+          onFileItemClick={() => onPreview('https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF')}
+        />
+      </div>
+
+      <div>
+        <div style={colTitleStyle}>上传完成无名称</div>
+        <Uploader
+          url={uploadUrl}
+          defaultValue={[
+            {
+              name: '文件名称超出可视区域',
+              url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+              status: 'success',
+              message: '上传成功',
+              type: 'image',
+              uid: '125',
+            },
+          ]}
+          onStart={onStart}
+          tips={false}
+        />
+      </div>
+    </div>
+  )
+}
+export default Demo3
+
+```
+    
+### 上传文件-基础用法列表展示
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo13 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const defaultFileList: any[] = [
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '122',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '123',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '124',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '125',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '126',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '127',
+    },
+  ]
+  const fileList: any[] = [
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '124',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: 'success',
+      type: 'image',
+      uid: '125',
+    },
+  ]
+
+  const colTitleStyle = {
+    fontSize: '12px',
+    marginBottom: '12px',
+  }
+
+  const onDelete = (file: any, fileList: any) => {
+    console.log('delete事件触发', file, fileList)
+  }
+
+  const onPreview = (currentUrl?: string, urls?: any[]) => {
+    Taro.previewImage({
+      current: currentUrl,
+      urls: urls?.map((i) => i?.url) ?? [],
+    })
+  }
+
+  return (
+    <div style={{ display: 'block' }}>
+      <div>
+        <div style={colTitleStyle}>当上传图片数量小于等于3个时：</div>
+        <Uploader
+          multiple
+          maxCount={3}
+          url={uploadUrl}
+          defaultValue={fileList}
+          onDelete={onDelete}
+          onFileItemClick={(_, index) => {
+            onPreview(fileList[index].url, fileList)
+          }}
+        />
+      </div>
+      <div>
+        <div style={colTitleStyle}>当上传图片数量大于3个时：</div>
+        <Uploader
+          multiple
+          span={4}
+          maxCount={8}
+          url={uploadUrl}
+          defaultValue={defaultFileList}
+          onDelete={onDelete}
+          onFileItemClick={(_, index) => {
+            onPreview(defaultFileList[index].url, defaultFileList)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+export default Demo13
+
+```
+    
+### 基础用法-上传列表展示
+
+
+```tsx
+import { Button, Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo4 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const defaultFileList: any[] = [
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '122',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '123',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '124',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '125',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '126',
+    },
+    {
+      name: '文件名称超出可视区域',
+      url: 'https://t7.baidu.com/it/u=911582538,1619719529&fm=193&f=GIF',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '127',
+    },
+  ]
+
+  return (
+    <Uploader url={uploadUrl} defaultValue={defaultFileList} maxCount={10} multiple previewType="list">
+      <Button type="primary" size="small">
+        上传文件
+      </Button>
+    </Uploader>
+  )
+}
+export default Demo4
+
+```
+    
+### 直接调起摄像头（移动端生效）
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  return (
+    <div>
+      <Uploader url={uploadUrl} sourceType={['camera']} />
+    </div>
+  )
+}
+export default Demo6
+
+```
+    
+### 使用前摄像头拍摄3s视频并上传(仅支持微信小程序)
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo7 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  return (
+    <div>
+      <Uploader url={uploadUrl} maxDuration={3} sourceType={['camera']} camera="front" />
+    </div>
+  )
+}
+export default Demo7
+
+```
+    
+### 限制上传数量5个
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  return (
+    <div>
+      <Uploader url={uploadUrl} multiple maxCount={5} />
+    </div>
+  )
+}
+export default Demo8
+
+```
+    
+### 限制上传大小（每个文件最大不超过50kb）
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const Demo9 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const onOversize = (files: Taro.chooseImage.ImageFile[]) => {
+    console.log('oversize触发文件大小不能超过50kb', files)
+  }
+  return (
+    <div>
+      <Uploader url={uploadUrl} multiple maxFileSize={1024 * 50} onOversize={onOversize} />
+    </div>
+  )
+}
+export default Demo9
+
+```
+    
+### 自定义数据 FormData、headers
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo10 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const formData = {
+    custom: 'test',
+  }
+  return (
+    <div>
+      <Uploader url={uploadUrl} data={formData} headers={formData} />
+    </div>
+  )
+}
+export default Demo10
+
+```
+    
+### 自定义 Taro.uploadFile 上传方式(before-xhr-upload)
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo11 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const beforeXhrUpload = (taroUploadFile: any, options: any) => {
+    const uploadTask = taroUploadFile({
+      url: options.url,
+      filePath: options.taroFilePath,
+      fileType: options.fileType,
+      header: {
+        'Content-Type': 'multipart/form-data',
+        ...options.headers,
+      },
+      formData: options.formData,
+      name: options.name,
+      success(response: { errMsg: any; statusCode: number; data: string }) {
+        if (options.xhrState === response.statusCode) {
+          options.onSuccess?.(response, options)
+        } else {
+          options.onFailure?.(response, options)
+        }
+      },
+      fail(e: any) {
+        options.onFailure?.(e, options)
+      },
+    })
+    options.onStart?.(options)
+    uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+      options.onProgress?.(res, options)
+    })
+  }
+  return (
+    <div>
+      <Uploader url={uploadUrl} method="put" beforeXhrUpload={beforeXhrUpload} />
+    </div>
+  )
+}
+export default Demo11
+
+```
+    
+### 选中文件后，通过按钮手动执行上传
+
+
+```tsx
+import { Button, Uploader } from '@mijadesign/mjui-react-taro'
+import React, { useRef } from 'react'
+
+interface uploadRefState {
+  submit: () => void
+  clear: () => void
+}
+
+const Demo12 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const uploadRef = useRef<uploadRefState>(null)
+
+  const submitUpload = () => {
+    ;(uploadRef.current as uploadRefState).submit()
+  }
+  const clearUpload = () => {
+    ;(uploadRef.current as uploadRefState).clear()
+  }
+  return (
+    <div style={{ display: 'block' }}>
+      <Uploader url={uploadUrl} maxCount={5} autoUpload={false} ref={uploadRef} />
+      <div style={{ display: 'flex', marginTop: '16px' }}>
+        <Button type="primary" size="small" onClick={submitUpload} style={{ marginInlineEnd: '10px' }}>
+          执行上传
+        </Button>
+        <Button type="primary" size="small" onClick={clearUpload}>
+          手动清空上传
+        </Button>
+      </div>
+    </div>
+  )
+}
+export default Demo12
+
+```
+    
+### 禁用状态
+
+
+```tsx
+import { Uploader } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo13 = () => {
+  return (
+    <div>
+      <Uploader disabled />
+    </div>
+  )
+}
+export default Demo13
+
+```
+    
+## Uploader
+
+### Props
+
+| 字段 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoUpload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | `boolean` | `true` |
+| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | `string` | `file` |
+| url | 上传服务器的接口地址 | `string` | `-` |
+| defaultValue | 默认已经上传的文件列表 | `FileType<React.ReactNode>[]` | `[]` |
+| value | 已经上传的文件列表 | `FileType<string>[]` | `[]` |
+| preview | 是否上传成功后展示预览图 | `boolean` | `true` |
+| previewUrl | 当上传非图片('image')格式的默认图片地址 | `string` | `-` |
+| deletable | 是否展示删除按钮 | `boolean` | `true` |
+| method | 上传请求的 http method | `string` | `post` |
+| previewType | 上传列表的内建样式，支持两种基本样式 picture、list | `string` | `picture` |
+| maxFileSize | 可以设定最大上传文件的大小（字节） | `number` \| `string` | `Number.MAX_VALUE` |
+| maxCount | 文件上传数量限制 | `number` \| `string` | `1` |
+| fit | 图片填充模式 | `contain` \| `cover` \| `fill` \| `none` \| `scale-down` | `cover` |
+| sourceType | [选择文件的来源]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html") | `Array` | `['album','camera']` |
+| camera`仅支持WEAPP` | 仅在 `source-type` 为 `camera` 时生效，使用前置或后置摄像头 | `String` | `back` |
+| sizeType | [是否压缩所选文件]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html") | `Array` | `['original','compressed']` |
+| mediaType`仅支持WEAPP` | [选择文件类型]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html") | `Array` | `['image', 'video']` |
+| maxDuration`仅支持WEAPP` | 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。 | `number` | `10` |
+| headers | 设置上传的请求头部 | `object` | `{}` |
+| data | 附加上传的信息 formData | `object` | `{}` |
+| uploadIcon | 上传区域icon| `ReactNode` | `<Addcard />` |
+| uploadLabel | 上传区域图片下方文字 | `string` | `&quot;&quot;` |
+| xhrState | 接口响应的成功状态（status）值 | `number` | `200` |
+| disabled | 是否禁用文件上传 | `boolean` | `false` |
+| multiple | 是否支持文件多选 | `boolean` | `false` |
+| timeout | 超时时间，单位为毫秒 | `number` \| `string`   | `1000 * 30` |
+| tips | 是否展示描述文案| `boolean`   | `true` |
+| span | 上传一行展示| `3` \| `4`   | `3` |
+| previewMode | 图片展示模式| `string`   | `aspectFill` |
+| beforeXhrUpload | 执行 XHR 上传时，自定义方式 | `(xhr: XMLHttpRequest, options: any) => void` | `-` |
+| beforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | `(file: FileItem, files: FileItem[]) => boolean` | `-` |
+| onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` |
+| onProgress | 文件上传的进度 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
+| onOversize | 文件大小超过限制时触发 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;files: FileItem[]}) => void` | `-` |
+| onSuccess | 上传成功 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` |
+| onFailure | 上传失败 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` |
+| onChange | 上传文件改变时的状态 | `(param: FileItem[]) => void` | `-` |
+| onDelete | 文件删除之前的状态 | `(file: FileItem, files: FileItem[]) => void` | `-` |
+| onFileItemClick | 文件上传成功后点击触发 | `(file: FileItem, index: number) => void` | `-` |
+
+### FileItem
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| status | 文件状态值，可选'ready,uploading,success,error,removed' | `ready` |
+| uid | 文件的唯一标识 | `new Date().getTime().toString()` |
+| name | 文件名称 | `-` |
+| url | 文件路径 | `-` |
+| type | 文件类型 | `image/jpeg` |
+| formData | 上传所需的data | `new FormData()` |
+
+### Methods
+
+通过 ref 可以获取到 Uploader 实例并调用实例方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit | 手动上传模式，执行上传操作 | `-` | `-` |
+| clear | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | `index` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-uploader-background | 上传图片的背景颜色 | `$color-background` |
+| \--nutui-uploader-background-disabled | 上传图片禁用状态的背景颜色 | `$color-background` |
+| \--nutui-uploader-image-border | 上传图片的border值 | `0px` |
+| \--nutui-uploader-image-border-radius | 上传图片的border圆角 | `$radius-1` |
+| \--nutui-uploader-image-color | 上传图片的文字颜色 | `$color-text-help` |
+| \--nutui-uploader-image-disabled | 上传图片的禁用状态 | `$color-text-disabled` |
+| \--nutui-uploader-image-height | 上传图片的高度 | `96px` |
+| \--nutui-uploader-image-icon-margin-bottom | 上传区域图片下方文字margin-bottom值 | `$spacing-0` |
+| \--nutui-uploader-image-icon-tip-color | 上传区域图片下方文字颜色 | `$color-text` |
+| \--nutui-uploader-image-icon-tip-font-size | 上传区域图片下方文字大小 | `$font-size-1` |
+| \--nutui-uploader-image-width | 上传图片的宽度 | `96px` |
+| \--nutui-uploader-picture-icon-tip-color | 上传图片icon的文字颜色 | `$color-text` |
+| \--nutui-uploader-preview-close-right | 上传图片关闭按钮的right值 | `0px` |
+| \--nutui-uploader-preview-close-top | 上传图片关闭按钮的top值 | `0px` |
+| \--nutui-uploader-preview-margin-bottom | 上传区域预览margin-bottom的值 | `$spacing-2` |
+| \--nutui-uploader-preview-margin-right | 上传区域预览margin-right的值 | `$spacing-2` |
+| \--nutui-uploader-preview-progress-background | 上传区域预览进度的背景颜色 | `$color-mask-secondary` |
+| \--nutui-uploader-preview-tips-background | 上传图片预览tips下的背景颜色 | `$color-mask` |
+| \--nutui-uploader-preview-tips-height | 上传图片预览tips下的高度 | `24px` |
+| \--nutui-uploader-preview-tips-padding | 上传图片预览tips下的padding值 | `0 $spacing-0` |