| 1 |
- import{c as t,o as d,C as e}from"./vendor.ed841bd5.js";const r={class:"markdown-body"},o=e('<h1>Uploader 上传</h1><h3>介绍</h3><p>用于将本地的图片或文件上传至服务器。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Uploader } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Uploader);\n\n</code></pre><h2>代码示例</h2><h3>基本用法</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址"></nut-uploader>\n</code></pre><h3>自定义上传样式</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址">\n <nut-button type="primary" icon="uploader">上传文件</nut-button>\n</nut-uploader>\n</code></pre><h3>直接调起摄像头（移动端生效）</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址" capture></nut-uploader>\n</code></pre><h3>限制上传数量5个</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址" multiple maximum="5"></nut-uploader>\n</code></pre><h3>限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址" multiple :maximize="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>\n</code></pre><pre><code class="language-javascript">setup() {\n const formData = {\n custom: 'test'\n };\n const onOversize = (files: File[]) => {\n console.log('oversize 触发 文件大小不能超过 50kb', files);\n };\n\n const beforeUpload = (files: File[]) => {\n //自定义处理\n return files;\n }\n \n return {\n onOversize,\n formData\n };\n}\n</code></pre><h3>自定义 FormData headers</h3><pre><code class="language-html"><nut-uploader url="http://服务器地址" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>\n</code></pre><pre><code class="language-javascript">setup() {\n const formData = {\n custom: 'test'\n };\n const onOversize = (files: File[]) => {\n console.log('oversize 触发 文件大小不能超过 50kb', files);\n };\n \n return {\n onOversize,\n formData\n };\n}\n</code></pre><h3>禁用状态</h3><pre><code class="language-html"><nut-uploader disabled></nut-uploader>\n</code></pre><h2>API</h2><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td><code>input</code> 标签 <code>name</code> 的名称，发到后台的文件参数名</td><td>String</td><td>“file”</td></tr><tr><td>url</td><td>上传服务器的接口地址</td><td>String</td><td>-</td></tr><tr><td>v-model:file-list</td><td>默认已经上传的文件列表</td><td>FileItem[]</td><td>[]</td></tr><tr><td>is-preview</td><td>是否上传成功后展示预览图</td><td>Boolean</td><td>true</td></tr><tr><td>is-deletable</td><td>是否展示删除按钮</td><td>Boolean</td><td>true</td></tr><tr><td>method</td><td>上传请求的 http method</td><td>String</td><td>“post”</td></tr><tr><td>capture</td><td>图片<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture">选取模式</a>，直接调起摄像头</td><td>String</td><td>false</td></tr><tr><td>maximize</td><td>可以设定最大上传文件的大小（字节）</td><td>Number丨String</td><td>Number.MAX_VALUE</td></tr><tr><td>maximum</td><td>文件上传数量限制</td><td>Number丨String</td><td>1</td></tr><tr><td>clear-input</td><td>是否需要清空<code>input</code>内容，设为<code>true</code>支持重复选择上传同一个文件</td><td>Boolean</td><td>false</td></tr><tr><td>accept</td><td>允许上传的文件类型，<a href="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">详细说明</a></td><td>String</td><td>*</td></tr><tr><td>headers</td><td>设置上传的请求头部</td><td>Object</td><td>{}</td></tr><tr><td>data</td><td>附加上传的信息 formData</td><td>Object</td><td>{}</td></tr><tr><td>upload-icon</td><td>上传区域<a href="#/zh-CN/icon">图标名称</a>或图片链接</td><td>String</td><td>“photograph”</td></tr><tr><td>xhr-state</td><td>接口响应的成功状态（status）值</td><td>Number</td><td>200</td></tr><tr><td>with-credentials</td><td>支持发送 cookie 凭证信息</td><td>Boolean</td><td>fasle</td></tr><tr><td>multiple</td><td>是否支持文件多选</td><td>Boolean</td><td>fasle</td></tr><tr><td>disabled</td><td>是否禁用文件上传</td><td>Boolean</td><td>fasle</td></tr><tr><td>timeout</td><td>超时时间，单位为毫秒</td><td>Number丨String</td><td>1000 * 30</td></tr><tr><td>before-upload</td><td>上传前的函数需要返回一个<code>Promise</code>对象</td><td>Function</td><td>null</td></tr><tr><td>before-delete</td><td>除文件时的回调，返回值为 false 时不移除。支持返回一个 <code>Promise</code> 对象，<code>Promise</code> 对象 resolve(false) 或 reject 时不移除</td><td>Function(file): boolean 丨Promise</td><td>-</td></tr></tbody></table><h3>FileItem</h3><table><thead><tr><th>名称</th><th>说明</th><th>默认值</th></tr></thead><tbody><tr><td>status</td><td>文件状态值，可选’ready,uploading,success,error,removed’</td><td>“ready”</td></tr><tr><td>uid</td><td>文件的唯一标识</td><td>new Date().getTime().toString()</td></tr><tr><td>name</td><td>文件名称</td><td>“”</td></tr><tr><td>url</td><td>文件路径</td><td>“”</td></tr><tr><td>type</td><td>文件类型</td><td>“image/jpeg”</td></tr><tr><td>formData</td><td>上传所需的data</td><td>new FormData()</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>start</td><td>文件上传开始</td><td>options</td></tr><tr><td>progress</td><td>文件上传的进度</td><td>event,options</td></tr><tr><td>oversize</td><td>文件大小超过限制时触发</td><td>files</td></tr><tr><td>success</td><td>上传成功</td><td>responseText,options</td></tr><tr><td>failure</td><td>上传失败</td><td>responseText,options</td></tr><tr><td>change</td><td>上传文件改变时的状态</td><td>fileList,event</td></tr><tr><td>delete</td><td>文件删除之前的状态</td><td>files,fileList</td></tr></tbody></table>',29),a={expose:[],setup:e=>(e,a)=>(d(),t("div",r,[o]))};export default a;
|
