提交 47bc53fb 编写于 作者: richard_1015's avatar richard_1015

fix(uploader): upload file type modify

上级 55e2d423
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<div class="demo bg-w"> <div class="demo bg-w">
<h2>基础用法</h2> <h2>基础用法</h2>
<nut-uploader :url="uploadUrl" @start="start"></nut-uploader> <nut-uploader :url="uploadUrl" @start="start"></nut-uploader>
<h2>直接调起摄像头</h2>
<nut-uploader capture></nut-uploader>
<h2>上传状态</h2> <h2>上传状态</h2>
<nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader> <nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader>
<h2>限制上传数量5个</h2> <h2>限制上传数量5个</h2>
...@@ -20,7 +22,8 @@ ...@@ -20,7 +22,8 @@
:before-upload="beforeUpload" :before-upload="beforeUpload"
:maximize="1024 * 50" :maximize="1024 * 50"
@oversize="onOversize" @oversize="onOversize"
></nut-uploader> >
</nut-uploader>
<h2>自定义数据 FormData 、 headers </h2> <h2>自定义数据 FormData 、 headers </h2>
<nut-uploader <nut-uploader
:url="uploadUrl" :url="uploadUrl"
......
...@@ -21,6 +21,10 @@ app.use(Uploader); ...@@ -21,6 +21,10 @@ app.use(Uploader);
``` html ``` html
<nut-uploader url="http://服务器地址"></nut-uploader> <nut-uploader url="http://服务器地址"></nut-uploader>
### 直接调起摄像头
``` html
<nut-uploader url="http://服务器地址" capture></nut-uploader>
``` ```
### 限制上传数量5个 ### 限制上传数量5个
...@@ -94,11 +98,11 @@ setup() { ...@@ -94,11 +98,11 @@ setup() {
| is-preview | 是否上传成功后展示预览图 | Boolean | true | | is-preview | 是否上传成功后展示预览图 | Boolean | true |
| is-deletable | 是否展示删除按钮 | Boolean | true | | is-deletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" | | 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 | | maximize | 可以设定最大上传文件的大小(字节) | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 | | maximum | 文件上传数量限制 | Number丨String | 1 |
| clear-input | 是否需要清空`input`内容,设为`true`支持重复选择上传同一个文件 | Boolean | false | | 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 | {} | | headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} | | data | 附加上传的信息 formData | Object | {} |
| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" | | upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
......
...@@ -18,8 +18,18 @@ ...@@ -18,8 +18,18 @@
<view class="upload" v-if="maximum - fileList.length"> <view class="upload" v-if="maximum - fileList.length">
<nut-icon color="#808080" :name="uploadIcon"></nut-icon> <nut-icon color="#808080" :name="uploadIcon"></nut-icon>
<input <input
v-if="capture"
type="file"
capture="camera"
:accept="accept"
:multiple="multiple"
:name="name"
:disabled="disabled"
@change="onChange"
/>
<input
v-else
type="file" type="file"
:capture="capture"
:accept="accept" :accept="accept"
:multiple="multiple" :multiple="multiple"
:name="name" :name="name"
...@@ -58,11 +68,11 @@ export default create({ ...@@ -58,11 +68,11 @@ export default create({
isPreview: { type: Boolean, default: true }, isPreview: { type: Boolean, default: true },
isDeletable: { type: Boolean, default: true }, isDeletable: { type: Boolean, default: true },
method: { type: String, default: 'post' }, method: { type: String, default: 'post' },
capture: { type: String, default: 'camera' }, capture: { type: Boolean, default: false },
maximize: { type: [Number, String], default: Number.MAX_VALUE }, maximize: { type: [Number, String], default: Number.MAX_VALUE },
maximum: { type: [Number, String], default: 1 }, maximum: { type: [Number, String], default: 1 },
clearInput: { type: Boolean, default: false }, clearInput: { type: Boolean, default: false },
accept: { type: String, default: 'image/*' }, accept: { type: String, default: '*' },
headers: { type: Object, default: {} }, headers: { type: Object, default: {} },
data: { type: Object, default: {} }, data: { type: Object, default: {} },
uploadIcon: { type: String, default: 'photograph' }, uploadIcon: { type: String, default: 'photograph' },
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册