feat: uploader docs

src/packages/uploader/demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="demo bg-w">
+    <h2>基础用法</h2>
+    <nut-uploader></nut-uploader>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('uploader');
+export default createDemo({
+  props: {}
+});
+</script>
+
+<style lang="scss" scoped></style>

src/packages/uploader/doc.md

@@ -1,237 +1,54 @@
 # Uploader 上传
 
-> 文件上传组件
+### 介绍
 
-### 基本用法
+用于将本地的图片或文件上传至服务器。
+
+### 安装
 
 ``` javascript
 import { createApp } from 'vue';
-import { Button } from '@nutui/nutui';
+import { Uploader } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Button);
+app.use(Uploader);
 
 ```
 
-```html
-<nut-uploader
-    name="uploader-demo"
-    :url="url"
-    :isPreview="true"
-    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
-    @start="onStart"
-    @success="onSuccess"
-    @fail="onFail"
-    @progress="onProgress"
-    @preview="onPreview"
-    @showMsg="showMsgFn"
-    typeError="对不起，不支持上传该类型文件！"
-    limitError="对不起，文件大小超过限制！"
->
-上传
-</nut-uploader>   
-```
-
-```javascript
-export default { 
-  data() {
-    return {
-      url:'https://my-json-server.typicode.com/linrufeng/demo/posts',    
-    };
-  },
-  methods:{
-      onStart(){
-        console.log('上传开始');
-      },
-      onSuccess(file,res){
-        alert('上传成功！');
-      },
-      onFail(file,res){
-        alert('上传失败！');
-      },
-      onProgress(file, loaded, total) {
-        console.log('上传进度:'+parseInt((100 * loaded) / total)+'%');
-      },
-      onPreview(file) {
-        this.previewImg = file;
-      },
-      showMsgFn(msg){
-        alert(msg);
-      },
-  }
-```
-
-### 高级用法
-
-与吐司 **Toast** 组件结合使用
-
-```html
-<nut-uploader
-    name="uploader-demo"
-    :url="url"
-    @success="onSuccess"
-    @fail="onFail"
-    @showMsg="showMsgFn"
->
-上传
-</nut-uploader>   
-```
-
-```javascript
-export default { 
-  data() {
-    return {
-      url:'https://my-json-server.typicode.com/linrufeng/demo/posts',    
-    };
-  },
-  methods:{
-      onSuccess(file,res){
-        this.$toast.success('上传成功');
-      },
-      onFail(file,res){
-        this.$toast.fail('上传失败！');
-      },
-      showMsgFn(msg){
-        this.$toast.text(msg);
-      },
-  }
-
-```
-
-与按钮 **Button** 组件结合使用
-
-```html
-<nut-uploader
-  :name="name"
-  :url="url"    
-  >
-  <nut-button small>上传</nut-button>
-</nut-uploader>   
-```
-
-自定义 headers & formData 使用
-```html
-<nut-uploader
-  :name="name"
-  :url="url"
-  :headers="headers"
-  :attach="formData"
-  >
-  <nut-button small>上传</nut-button>
-</nut-uploader>   
-```
-```javascript
-export default { 
-  data() {
-    return {
-      url:'https://my-json-server.typicode.com/linrufeng/demo/posts', 
-      name:'testname',
-      headers:{
-        token:'test'
-      },
-      formData:{
-        f1:'test',
-        f2:'test1'
-      },
-    };
-  },
-}
-```
-
-与进度条组件 **Progress** 结合使用
-
-```html
-<nut-uploader
-    :name="name"
-    :url="url"
-    @progress="progress"    
-    > 上传
-</nut-uploader>  
-<nut-progress :percentage="progressNum" :showText="false" strokeWidth="24"/>
-```
-预览上传图片
-```html
- <nut-uploader
-    :name="name"
-    :url="url"
-    :xhrState="stateNum"
-    :isPreview="true"
-    @success="demoSuccess"
-    @fail="demoFail"
-    @preview="preview"
-    @showMsg="showMsg1"
-  >
-    <nut-button small>上传</nut-button>
-  </nut-uploader>
-```
-```js
-preview(file) {
-  this.previewImg = file;
-},
-```
-
-上传图片前处理图片内容
-
-```html
- <nut-uploader
-    :beforeUpload="test"
-    :name="name"
-    :url="url"
-    :xhrState="stateNum"
-    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
-    @success="demo1Success"
-    @failure="demo1Fail"
-    @start="demo1UploadStart"
-    @showMsg="showMsg"
-  ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
-```
-```js
-test($ev){   
-  console.log($ev,'可以处理input选择的内容')  
-  return {
-    event:$ev,
-    data:''
-  }
-},
-```
-
-自定义增加上传图片数据
-```html
-<nut-uploader
-    :selfData="selfData"          
-    :name="name"
-    :url="url"
-    :xhrState="stateNum"
-    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
-    @success="demo1Success"
-    @failure="demo1Fail"
-    @start="demo1UploadStart"
-    @showMsg="showMsg"
-  ><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>
-
-```
+## 代码示例
 
+### 基本用法
 
+## API
 
 ### Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| name | input name的名称 | String | ""
+| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file"
 | url | 上传服务器的接口地址 | String | -
-| isPreview | 是否需要预览 | Boolean | false
-| clearInput | 是否需要清空input内容，设为true支持重复选择上传同一个文件 | Boolean | false
-| maxSize | 可以设定最大上传文件的大小（字节） | Number | 5242880
-| acceptType | 可以上传文件的类型 | Array | ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
-| attach | 附加上传的信息formData | Object | {}
-| headers | 自定义headers | Object | {}
+| default-file-list | 默认已经上传的文件列表 | object[] | -
+| file-list | 默认已经上传的文件列表 | object[] | -
+| custom-request | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | -
+| is-preview | 是否上传成功后展示预览图 | Boolean | true
+| is-deletable | 是否展示删除按钮 | Boolean | true
+| method | 上传请求的 http method | String | "post"
+| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，可选值为 camera (直接调起摄像头) | String | "camera"
+| max-size | 可以设定最大上传文件的大小（字节） | Number丨String | 5242880 (5M)
+| max-count | 文件上传数量限制 | Number丨String | 1
+| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | false
+| accept-type | 允许上传的文件类型，[详细说明](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 | {}
+| form-data | 附加上传的信息 formData | Object | {}
+| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | photograph
 | xhrState | 接口响应的成功状态（status）值 | Number | 200
-| typeError | 文件类型错误提示文案 | String | "不支持上传该类型文件"
-| limitError | 文件大小超过限制提示文案 | String | "文件大小超过限制"
-| xmlError | 浏览器不支持本组件时的提示文案 | String | "对不起，您的浏览器不支持本组件！"
 | withCredentials | 支持发送 cookie 凭证信息 | Boolean | fasle
-| beforeUpload | 上传前的函数需要返回一个对象  | Function | {event:$event} $event为点击事件必传
-| selfData | 自定义增加上传的数据 | Object | {}
+| multiple | 是否支持文件多选 | Boolean | fasle
+| disabled | 是否禁用文件上传 | Boolean | fasle
+| before-upload | 上传前的函数需要返回一个对象  | Function | {event:$event} $event为点击事件必传
+| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除      | Function(file): boolean 丨Promise | -
+| on-change | 上传文件改变时的状态，详见     | Function(fileList) 丨 Promise | -
+| custom-request | 通过覆盖默认的上传行为，可以自定义自己的上传实现     | Function  | -
 
 ### Event
 
@@ -239,18 +56,7 @@ test($ev){
 |----- | ----- | ----- 
 | start | 文件上传开始 | -
 | progress | 文件上传的进度 | 上传文件、已上传数据量、总数据量
-| preview | isPreview为true时可通过此方法获文件的Base64编码，一般用于预览 | 文件的Base64编码
-| success | 上传成功 | 文件、responseText
-| failure | 上传失败 | 文件、responseText
-| showMsg | 组件抛出信息的处理函数 | 组件抛出的提示信息
+| oversize | 	文件大小超过限制时触发 | fileItem
+| success | 上传成功 | fileList
+| failure | 上传失败 | fileList
 
-### tips
-
-使用 beforeUpload 一定要返回一个JSON 对象且 event 为必传字段
-```js
-beforeUpload($e){
-  return {
-    event:$e
-  }
-}
-```

src/packages/uploader/index.scss

@@ -0,0 +1,20 @@
+.nut-uploader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  background: $uploader-babackground;
+  width: $uploader-width;
+  height: $uploader-height;
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+  }
+}

src/packages/uploader/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <view :class="classes">
+    <nut-icon color="#808080" :name="uploadIcon"></nut-icon>
+    <input type="file" :name="name" @change="onChange" />
+  </view>
+</template>
+
+<script lang="ts">
+import { computed } from 'vue';
+import { createComponent } from '@/utils/create';
+import Icon from '@/packages/icon/index.vue';
+const { componentName, create } = createComponent('uploader');
+
+export default create({
+  props: {
+    name: { type: String, default: 'file' },
+    url: { type: String, default: '' },
+    defaultFileList: { type: Array, default: [] },
+    fileList: { type: Array, default: [] },
+    isPreview: { type: Boolean, default: true },
+    isDeletable: { type: Boolean, default: true },
+    method: { type: String, default: 'post' },
+    capture: { type: String, default: '' },
+    maxSize: { type: [Number, String], default: 1024 * 1024 * 5 },
+    maxCount: { type: [Number, String], default: 1 },
+    clearInput: { type: Boolean, default: false },
+    acceptType: { type: String, default: '' },
+    headers: { type: Object, default: {} },
+    formData: { type: Object, default: {} },
+    uploadIcon: { type: String, default: 'photograph' },
+    xhrState: { type: [Number, String], default: 200 },
+    withCredentials: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    beforeUpload: { type: Function },
+    beforeDelete: { type: Function },
+    onChange: { type: Function },
+    customRequest: { type: Function }
+  },
+  components: {
+    [Icon.name]: Icon
+  },
+  emits: ['start', 'progress', 'oversize', 'success', 'failure', 'on-change'],
+  setup(props, { emit }) {
+    console.log(props);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const onChange = (event: Event) => {
+      emit('on-change', event);
+    };
+
+    return {
+      onChange,
+      classes
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile/App.vue

@@ -71,6 +71,11 @@ export default defineComponent({
     overflow-y: auto;
     padding: 0 25px;
     padding-top: 57px;
+
+    &.bg-w {
+      background: #fff;
+    }
+
     &::-webkit-scrollbar {
       width: 0;
       background: transparent;

src/styles/variables.scss

@@ -92,3 +92,9 @@ $cell-desc-color: $disable-color;
 $icon-height: 20px;
 $icon-width: 20px;
 $icon-line-height: 20px;
+
+// uploader
+
+$uploader-width: 100px;
+$uploader-height: 100px;
+$uploader-babackground: #f7f8fa;