Browse Source

fix(uploader): upload file type modify

richard1015 4 years ago
parent
commit
47bc53fb6e
3 changed files with 23 additions and 6 deletions
  1. 4 1
      src/packages/uploader/demo.vue
  2. 6 2
      src/packages/uploader/doc.md
  3. 13 3
      src/packages/uploader/index.vue

+ 4 - 1
src/packages/uploader/demo.vue

@@ -2,6 +2,8 @@
   <div class="demo bg-w">
     <h2>基础用法</h2>
     <nut-uploader :url="uploadUrl" @start="start"></nut-uploader>
+    <h2>直接调起摄像头</h2>
+    <nut-uploader capture></nut-uploader>
     <h2>上传状态</h2>
     <nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader>
     <h2>限制上传数量5个</h2>
@@ -20,7 +22,8 @@
       :before-upload="beforeUpload"
       :maximize="1024 * 50"
       @oversize="onOversize"
-    ></nut-uploader>
+    >
+    </nut-uploader>
     <h2>自定义数据 FormData 、 headers </h2>
     <nut-uploader
       :url="uploadUrl"

+ 6 - 2
src/packages/uploader/doc.md

@@ -21,6 +21,10 @@ app.use(Uploader);
 
 ``` html
 <nut-uploader url="http://服务器地址"></nut-uploader>
+### 直接调起摄像头
+    
+``` html
+<nut-uploader url="http://服务器地址" capture></nut-uploader>
 ```
 ### 限制上传数量5个
 
@@ -94,11 +98,11 @@ setup() {
 | 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"    |
+| 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                            | image/*           |
+| 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"  |

+ 13 - 3
src/packages/uploader/index.vue

@@ -18,8 +18,18 @@
     <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"
-        :capture="capture"
         :accept="accept"
         :multiple="multiple"
         :name="name"
@@ -58,11 +68,11 @@ export default create({
     isPreview: { type: Boolean, default: true },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: 'post' },
-    capture: { type: String, default: 'camera' },
+    capture: { type: Boolean, default: false },
     maximize: { type: [Number, String], default: Number.MAX_VALUE },
     maximum: { type: [Number, String], default: 1 },
     clearInput: { type: Boolean, default: false },
-    accept: { type: String, default: 'image/*' },
+    accept: { type: String, default: '*' },
     headers: { type: Object, default: {} },
     data: { type: Object, default: {} },
     uploadIcon: { type: String, default: 'photograph' },