feat(uploader): custom slot & update:fileList

src/packages/uploader/demo.vue

@@ -2,7 +2,11 @@
   <div class="demo bg-w">
     <h2>基础用法</h2>
     <nut-uploader :url="uploadUrl" @start="start"></nut-uploader>
-    <h2>直接调起摄像头</h2>
+    <h2>自定义上传样式</h2>
+    <nut-uploader :url="uploadUrl">
+      <nut-button type="primary" icon="uploader">上传文件</nut-button>
+    </nut-uploader>
+    <h2>直接调起摄像头（移动端生效）</h2>
     <nut-uploader capture></nut-uploader>
     <h2>上传状态</h2>
     <nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader>

src/packages/uploader/doc.md

@@ -23,7 +23,16 @@ app.use(Uploader);
 <nut-uploader url="http://服务器地址"></nut-uploader>
 ```
 
-### 直接调起摄像头
+
+### 自定义上传样式
+
+``` html
+<nut-uploader url="http://服务器地址">
+  <nut-button type="primary" icon="uploader">上传文件</nut-button>
+</nut-uploader>
+```
+
+### 直接调起摄像头（移动端生效）
     
 ``` html
 <nut-uploader url="http://服务器地址" capture></nut-uploader>
@@ -92,51 +101,51 @@ setup() {
 
 ### Prop
 
-| 字段              | 说明                                                                                                                                                                                   | 类型                              | 默认值      |
-|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|-------------|
-| name              | `input` 标签 `name` 的名称，发到后台的文件参数名                                                                                                                                       | String                            | "file"      |
-| url               | 上传服务器的接口地址                                                                                                                                                                   | String                            | -           |
-| file-list         | 默认已经上传的文件列表                                                                                                                                                                 | FileItem[]                          | []           |
-| 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)，直接调起摄像头                                                   | String                            | false    |
-| maximize          | 可以设定最大上传文件的大小（字节）                                                                                                                                                     | Number丨String                    | Number.MAX_VALUE           |
-| maximum         | 文件上传数量限制                                                                                                                                                                       | Number丨String                    | 1           |
-| clear-input       | 是否需要清空`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                            | {}          |
-| upload-icon       | 上传区域[图标名称](#/zh-CN/icon)或图片链接                                                                                                                                             | String                            | "photograph"  |
-| xhr-state         | 接口响应的成功状态（status）值                                                                                                                                                         | Number                            | 200         |
-| with-credentials  | 支持发送 cookie 凭证信息                                                                                                                                                               | Boolean                           | fasle       |
-| multiple          | 是否支持文件多选                                                                                                                                                                       | Boolean                           | fasle       |
-| disabled          | 是否禁用文件上传                                                                                                                                                                       | Boolean                           | fasle       |
-| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                           | Function                          | null |
-| before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除                                                                     | Function(file): boolean 丨Promise | -           |
+| 字段              | 说明                                                                                                                                                                                   | 类型                              | 默认值           |
+|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
+| name              | `input` 标签 `name` 的名称，发到后台的文件参数名                                                                                                                                       | String                            | "file"           |
+| url               | 上传服务器的接口地址                                                                                                                                                                   | String                            | -                |
+| v-model:file-list | 默认已经上传的文件列表                                                                                                                                                                 | FileItem[]                        | []               |
+| 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)，直接调起摄像头                                                                     | String                            | false            |
+| maximize          | 可以设定最大上传文件的大小（字节）                                                                                                                                                     | Number丨String                    | Number.MAX_VALUE |
+| maximum           | 文件上传数量限制                                                                                                                                                                       | Number丨String                    | 1                |
+| clear-input       | 是否需要清空`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                            | {}               |
+| upload-icon       | 上传区域[图标名称](#/zh-CN/icon)或图片链接                                                                                                                                             | String                            | "photograph"     |
+| xhr-state         | 接口响应的成功状态（status）值                                                                                                                                                         | Number                            | 200              |
+| with-credentials  | 支持发送 cookie 凭证信息                                                                                                                                                               | Boolean                           | fasle            |
+| multiple          | 是否支持文件多选                                                                                                                                                                       | Boolean                           | fasle            |
+| disabled          | 是否禁用文件上传                                                                                                                                                                       | Boolean                           | fasle            |
+| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                  | Function                          | null             |
+| before-delete     | 除文件时的回调，返回值为 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
 
-| 名称     | 说明                   | 回调参数                         |
-|----------|------------------------|----------------------------------|
-| start    | 文件上传开始           | options                               |
-| progress | 文件上传的进度         | event，options |
-| oversize | 文件大小超过限制时触发 | files                            |
-| success  | 上传成功               | responseText，options                         |
-| failure  | 上传失败               | responseText，options                         |
-| change  | 上传文件改变时的状态               | fileList，event                       |
-| delete  | 文件删除之前的状态               | files，fileList                         |
+| 名称     | 说明                   | 回调参数             |
+|----------|------------------------|----------------------|
+| start    | 文件上传开始           | options              |
+| progress | 文件上传的进度         | event,options        |
+| oversize | 文件大小超过限制时触发 | files                |
+| success  | 上传成功               | responseText,options |
+| failure  | 上传失败               | responseText,options |
+| change   | 上传文件改变时的状态   | fileList,event       |
+| delete   | 文件删除之前的状态     | files,fileList       |
 

src/packages/uploader/index.scss

@@ -3,7 +3,11 @@
   display: flex;
   flex-wrap: wrap;
 
-  .upload {
+  &__slot {
+    position: relative;
+  }
+
+  &__upload {
     position: relative;
     background: $uploader-background;
     width: $uploader-width;
@@ -11,21 +15,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    input {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      cursor: pointer;
-      opacity: 0;
-      &:disabled {
-        cursor: not-allowed;
-      }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    &:disabled {
+      cursor: not-allowed;
     }
   }
-  .preview {
+
+  &__preview {
     width: $uploader-width;
     height: $uploader-height;
     display: flex;

src/packages/uploader/index.vue

@@ -1,42 +1,77 @@
 <template>
   <view :class="classes">
-    <view class="preview" v-for="item in fileList" :key="item.uid">
-      <view class="preview-img">
-        <nut-icon
-          v-if="isDeletable"
-          color="rgba(0,0,0,0.6)"
-          @click="onDelete(item, index)"
-          class="close"
-          name="mask-close"
-        ></nut-icon>
-        <img v-if="item.type.includes('image') && item.url" :src="item.url" />
-        <view class="tips" v-if="item.status != 'success'">{{
-          item.status
-        }}</view>
-      </view>
-    </view>
-    <view class="upload" v-if="maximum - fileList.length">
-      <nut-icon color="#808080" :name="uploadIcon"></nut-icon>
-      <input
-        v-if="capture"
-        type="file"
-        capture="camera"
-        :accept="accept"
-        :multiple="multiple"
-        :name="name"
-        :disabled="disabled"
-        @change="onChange"
-      />
-      <input
-        v-else
-        type="file"
-        :accept="accept"
-        :multiple="multiple"
-        :name="name"
-        :disabled="disabled"
-        @change="onChange"
-      />
+    <view class="nut-uploader__slot" v-if="$slots.default">
+      <slot></slot>
+      <template v-if="maximum - fileList.length">
+        <input
+          class="nut-uploader__input"
+          v-if="capture"
+          type="file"
+          capture="camera"
+          :accept="accept"
+          :multiple="multiple"
+          :name="name"
+          :disabled="disabled"
+          @change="onChange"
+        />
+        <input
+          class="nut-uploader__input"
+          v-else
+          type="file"
+          :accept="accept"
+          :multiple="multiple"
+          :name="name"
+          :disabled="disabled"
+          @change="onChange"
+        />
+      </template>
     </view>
+
+    <template v-else>
+      <view
+        class="nut-uploader__preview"
+        v-for="item in fileList"
+        :key="item.uid"
+      >
+        <view class="nut-uploader__preview-img">
+          <nut-icon
+            v-if="isDeletable"
+            color="rgba(0,0,0,0.6)"
+            @click="onDelete(item, index)"
+            class="close"
+            name="mask-close"
+          ></nut-icon>
+          <img v-if="item.type.includes('image') && item.url" :src="item.url" />
+          <view class="tips" v-if="item.status != 'success'">{{
+            item.status
+          }}</view>
+        </view>
+      </view>
+      <view class="nut-uploader__upload" v-if="maximum - fileList.length">
+        <nut-icon color="#808080" :name="uploadIcon"></nut-icon>
+        <input
+          class="nut-uploader__input"
+          v-if="capture"
+          type="file"
+          capture="camera"
+          :accept="accept"
+          :multiple="multiple"
+          :name="name"
+          :disabled="disabled"
+          @change="onChange"
+        />
+        <input
+          class="nut-uploader__input"
+          v-else
+          type="file"
+          :accept="accept"
+          :multiple="multiple"
+          :name="name"
+          :disabled="disabled"
+          @change="onChange"
+        />
+      </view>
+    </template>
   </view>
 </template>
 
@@ -100,7 +135,8 @@ export default create({
     'success',
     'failure',
     'change',
-    'delete'
+    'delete',
+    'update:fileList'
   ],
   setup(props, { emit }) {
     const fileList = reactive(props.fileList) as Array<FileItem>;
@@ -147,6 +183,7 @@ export default create({
           responseText,
           option
         });
+        emit('update:fileList', props.fileList);
       };
       uploadOption.onFailure = (
         responseText: XMLHttpRequest['responseText'],