mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
45 KiB
JavaScript
2 lines
45 KiB
JavaScript
/*! For license information please see 2689.605cd443.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["2689"],{1171:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Uploader \u6587\u4EF6\u4E0A\u4F20</h1>\n<div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3>\n<p>\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002</p>\n</div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3>\n<p>\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003<a href="#/zh-CN/advanced-usage#zu-jian-zhu-ce" target="_blank">\u7EC4\u4EF6\u6CE8\u518C</a>\u3002</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Uploader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Uploader</span>);\n</code></pre>\n</div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2>\n<div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3>\n<p>\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1 <code>after-read</code> \u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684 <code>file</code> \u5BF9\u8C61\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">:after-read</span>=<span class="hljs-string">"afterRead"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">afterRead</span> = (<span class="hljs-params">file</span>) => {\n <span class="hljs-comment">// \u6B64\u65F6\u53EF\u4EE5\u81EA\u884C\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668</span>\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(file);\n };\n\n <span class="hljs-keyword">return</span> {\n afterRead,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="wen-jian-yu-lan" tabindex="-1">\u6587\u4EF6\u9884\u89C8</h3>\n<p>\u901A\u8FC7 <code>v-model</code> \u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u6587\u4EF6\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">multiple</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> fileList = <span class="hljs-title function_">ref</span>([\n { <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'</span> },\n <span class="hljs-comment">// Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6</span>\n <span class="hljs-comment">// \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E</span>\n { <span class="hljs-attr">url</span>: <span class="hljs-string">'https://cloud-image'</span>, <span class="hljs-attr">isImage</span>: <span class="hljs-literal">true</span> },\n ]);\n\n <span class="hljs-keyword">return</span> {\n fileList,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="shang-chuan-zhuang-tai" tabindex="-1">\u4E0A\u4F20\u72B6\u6001</h3>\n<p>\u901A\u8FC7 <code>status</code> \u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0C<code>uploading</code> \u8868\u793A\u4E0A\u4F20\u4E2D\uFF0C<code>failed</code> \u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0C<code>done</code> \u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">:after-read</span>=<span class="hljs-string">"afterRead"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> fileList = <span class="hljs-title function_">ref</span>([\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">'uploading'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u4E0A\u4F20\u4E2D...'</span>,\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg'</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">'failed'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u4E0A\u4F20\u5931\u8D25'</span>,\n },\n ]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">afterRead</span> = (<span class="hljs-params">file</span>) => {\n file.<span class="hljs-property">status</span> = <span class="hljs-string">'uploading'</span>;\n file.<span class="hljs-property">message</span> = <span class="hljs-string">'\u4E0A\u4F20\u4E2D...'</span>;\n\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n file.<span class="hljs-property">status</span> = <span class="hljs-string">'failed'</span>;\n file.<span class="hljs-property">message</span> = <span class="hljs-string">'\u4E0A\u4F20\u5931\u8D25'</span>;\n }, <span class="hljs-number">1000</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n fileList,\n afterRead,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="xian-zhi-shang-chuan-shu-liang" tabindex="-1">\u9650\u5236\u4E0A\u4F20\u6570\u91CF</h3>\n<p>\u901A\u8FC7 <code>max-count</code> \u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">multiple</span> <span class="hljs-attr">:max-count</span>=<span class="hljs-string">"2"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> fileList = <span class="hljs-title function_">ref</span>([]);\n\n <span class="hljs-keyword">return</span> {\n fileList,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="xian-zhi-shang-chuan-da-xiao" tabindex="-1">\u9650\u5236\u4E0A\u4F20\u5927\u5C0F</h3>\n<p>\u901A\u8FC7 <code>max-size</code> \u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u5927\u5C0F\uFF0C\u8D85\u8FC7\u5927\u5C0F\u7684\u6587\u4EF6\u4F1A\u88AB\u81EA\u52A8\u8FC7\u6EE4\uFF0C\u8FD9\u4E9B\u6587\u4EF6\u4FE1\u606F\u53EF\u4EE5\u901A\u8FC7 <code>oversize</code> \u4E8B\u4EF6\u83B7\u53D6\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">multiple</span> <span class="hljs-attr">:max-size</span>=<span class="hljs-string">"500 * 1024"</span> @<span class="hljs-attr">oversize</span>=<span class="hljs-string">"onOversize"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onOversize</span> = (<span class="hljs-params">file</span>) => {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(file);\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 500kb'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n onOversize,\n };\n },\n};\n</code></pre>\n<p>\u5982\u679C\u9700\u8981\u9488\u5BF9\u4E0D\u540C\u7C7B\u578B\u7684\u6587\u4EF6\u6765\u4F5C\u51FA\u4E0D\u540C\u7684\u5927\u5C0F\u9650\u5236\uFF0C\u53EF\u4EE5\u5728 <code>max-size</code> \u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\uFF0C\u5728\u51FD\u6570\u4E2D\u901A\u8FC7 <code>file.type</code> \u533A\u5206\u6587\u4EF6\u7C7B\u578B\uFF0C\u8FD4\u56DE <code>true</code> \u8868\u793A\u8D85\u51FA\u9650\u5236\uFF0C<code>false</code> \u8868\u793A\u672A\u8D85\u51FA\u9650\u5236\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">multiple</span> <span class="hljs-attr">:max-size</span>=<span class="hljs-string">"isOverSize"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">isOverSize</span> = (<span class="hljs-params">file</span>) => {\n <span class="hljs-keyword">const</span> maxSize = file.<span class="hljs-property">type</span> === <span class="hljs-string">'image/jpeg'</span> ? <span class="hljs-number">500</span> * <span class="hljs-number">1024</span> : <span class="hljs-number">1000</span> * <span class="hljs-number">1024</span>;\n <span class="hljs-keyword">return</span> file.<span class="hljs-property">size</span> >= maxSize;\n };\n <span class="hljs-keyword">return</span> {\n isOverSize,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="zi-ding-yi-shang-chuan-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F</h3>\n<p>\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"plus"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u4E0A\u4F20\u6587\u4EF6<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-uploader</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="zi-ding-yi-yu-lan-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u9884\u89C8\u6837\u5F0F</h3>\n<p>\u901A\u8FC7 <code>preview-cover</code> \u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">preview-cover</span>=<span class="hljs-string">"{ file }"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"preview-cover van-ellipsis"</span>></span>{{ file.name }}<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-uploader</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">\n <span class="hljs-selector-class">.preview-cover</span> {\n <span class="hljs-attribute">position</span>: absolute;\n <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;\n <span class="hljs-attribute">box-sizing</span>: border-box;\n <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;\n <span class="hljs-attribute">padding</span>: <span class="hljs-number">4px</span>;\n <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;\n <span class="hljs-attribute">text-align</span>: center;\n <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.3</span>);\n }\n</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="zi-ding-yi-yu-lan-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u9884\u89C8\u5927\u5C0F</h3>\n<p>\u901A\u8FC7 <code>preview-size</code> \u5C5E\u6027\u5B9A\u4E49\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5927\u5C0F\u3002</p>\n<pre><code class="language-html"><span class="hljs-comment"><!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">preview-size</span>=<span class="hljs-string">"60"</span> /></span>\n<span class="hljs-comment"><!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">preview-size</span>=<span class="hljs-string">"5rem"</span> /></span>\n</code></pre>\n<p>\u5C06 <code>preview-size</code> \u8BBE\u7F6E\u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u53EF\u4EE5\u5206\u522B\u8BBE\u7F6E\u5BBD\u9AD8\u3002\u6570\u7EC4\u7B2C\u4E00\u9879\u5BF9\u5E94\u5BBD\u5EA6\uFF0C\u6570\u7EC4\u7B2C\u4E8C\u9879\u5BF9\u5E94\u9AD8\u5EA6\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">:preview-size</span>=<span class="hljs-string">"[60, 40]"</span> /></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="shang-chuan-qian-zhi-chu-li" tabindex="-1">\u4E0A\u4F20\u524D\u7F6E\u5904\u7406</h3>\n<p>\u901A\u8FC7\u4F20\u5165 <code>beforeRead</code> \u51FD\u6570\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u5904\u7406\uFF0C\u8FD4\u56DE <code>true</code> \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u8FD4\u56DE <code>false</code> \u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002\u652F\u6301\u8FD4\u56DE <code>Promise</code> \u5BF9 file \u5BF9\u8C61\u8FDB\u884C\u81EA\u5B9A\u4E49\u5904\u7406\uFF0C\u4F8B\u5982\u538B\u7F29\u56FE\u7247\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">:before-read</span>=<span class="hljs-string">"beforeRead"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-comment">// \u8FD4\u56DE\u5E03\u5C14\u503C</span>\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeRead</span> = (<span class="hljs-params">file</span>) => {\n <span class="hljs-keyword">if</span> (file.<span class="hljs-property">type</span> !== <span class="hljs-string">'image/jpeg'</span>) {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247'</span>);\n <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;\n }\n <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;\n };\n\n <span class="hljs-comment">// \u8FD4\u56DE Promise</span>\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">asyncBeforeRead</span> = (<span class="hljs-params">file</span>) =>\n <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {\n <span class="hljs-keyword">if</span> (file.<span class="hljs-property">type</span> !== <span class="hljs-string">'image/jpeg'</span>) {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247'</span>);\n <span class="hljs-title function_">reject</span>();\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-keyword">const</span> img = <span class="hljs-keyword">new</span> <span class="hljs-title class_">File</span>([<span class="hljs-string">'foo'</span>], <span class="hljs-string">'bar.jpg'</span>, {\n <span class="hljs-attr">type</span>: <span class="hljs-string">'image/jpeg'</span>,\n });\n <span class="hljs-title function_">resolve</span>(img);\n }\n });\n\n <span class="hljs-keyword">return</span> {\n beforeRead,\n asyncBeforeRead,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="jin-yong-wen-jian-shang-chuan" tabindex="-1">\u7981\u7528\u6587\u4EF6\u4E0A\u4F20</h3>\n<p>\u901A\u8FC7 <code>disabled</code> \u5C5E\u6027\u7981\u7528\u6587\u4EF6\u4E0A\u4F20\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">disabled</span> /></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="zi-ding-yi-dan-ge-tu-pian-yu-lan" tabindex="-1">\u81EA\u5B9A\u4E49\u5355\u4E2A\u56FE\u7247\u9884\u89C8</h3>\n<p>\u5728 <code>v-model</code> \u6570\u7EC4\u4E2D\u8BBE\u7F6E\u5355\u4E2A\u9884\u89C8\u56FE\u7247\u5C5E\u6027\uFF0C\u652F\u6301 <code>imageFit</code> <code>deletable</code> <code>previewSize</code> <code>beforeDelete</code>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">:deletable</span>=<span class="hljs-string">"false"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> fileList = <span class="hljs-title function_">ref</span>([\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg'</span>,\n <span class="hljs-attr">deletable</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">beforeDelete</span>: <span class="hljs-function">() =></span> {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'\u5220\u9664\u524D\u7F6E\u5904\u7406'</span>);\n },\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg'</span>,\n <span class="hljs-attr">imageFit</span>: <span class="hljs-string">'contain'</span>,\n },\n ]);\n\n <span class="hljs-keyword">return</span> { fileList };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="kai-qi-fu-gai-shang-chuan" tabindex="-1">\u5F00\u542F\u8986\u76D6\u4E0A\u4F20</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fileList"</span> <span class="hljs-attr">reupload</span> <span class="hljs-attr">max-count</span>=<span class="hljs-string">"2"</span> /></span>\n</code></pre>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> fileList = <span class="hljs-title function_">ref</span>([\n { <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'</span> },\n ]);\n\n <span class="hljs-keyword">return</span> { fileList };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>\u53C2\u6570</th>\n<th>\u8BF4\u660E</th>\n<th>\u7C7B\u578B</th>\n<th>\u9ED8\u8BA4\u503C</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model</td>\n<td>\u5DF2\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868</td>\n<td><em>FileListItem[]</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>accept</td>\n<td>\u5141\u8BB8\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C<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" target="_blank">\u8BE6\u7EC6\u8BF4\u660E</a></td>\n<td><em>string</em></td>\n<td><code>image/*</code></td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6</td>\n<td><em>number | string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>preview-size</td>\n<td>\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td>\n<td><em>number | string | Array</em></td>\n<td><code>80px</code></td>\n</tr>\n<tr>\n<td>preview-image</td>\n<td>\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>preview-full-image</td>\n<td>\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>preview-options</td>\n<td>\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u7684\u914D\u7F6E\u9879\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/zh-CN/image-preview" target="_blank">ImagePreview</a></td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>readonly</td>\n<td>\u662F\u5426\u5C06\u4E0A\u4F20\u533A\u57DF\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>deletable</td>\n<td>\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>reupload <code>v4.4.0</code></td>\n<td>\u662F\u5426\u5F00\u542F\u8986\u76D6\u4E0A\u4F20\uFF0C\u5F00\u542F\u540E\u4F1A\u5173\u95ED\u56FE\u7247\u9884\u89C8</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>show-upload</td>\n<td>\u662F\u5426\u5C55\u793A\u4E0A\u4F20\u533A\u57DF</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>lazy-load</td>\n<td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 <a href="#/zh-CN/lazyload" target="_blank">Lazyload</a> \u7EC4\u4EF6\u4F7F\u7528</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>capture</td>\n<td>\u56FE\u7247\u9009\u53D6\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>camera</code> (\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934)</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>after-read</td>\n<td>\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E\u7684\u56DE\u8C03\u51FD\u6570</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>before-read</td>\n<td>\u6587\u4EF6\u8BFB\u53D6\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C<br>\u652F\u6301\u8FD4\u56DE <code>Promise</code></td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>before-delete</td>\n<td>\u6587\u4EF6\u5220\u9664\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C<br>\u652F\u6301\u8FD4\u56DE <code>Promise</code></td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>max-size</td>\n<td>\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A <code>byte</code></td>\n<td><em>number | string | (file: File) => boolean</em></td>\n<td><code>Infinity</code></td>\n</tr>\n<tr>\n<td>max-count</td>\n<td>\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236</td>\n<td><em>number | string</em></td>\n<td><code>Infinity</code></td>\n</tr>\n<tr>\n<td>result-type</td>\n<td>\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>file</code> <code>text</code></td>\n<td><em>string</em></td>\n<td><code>dataUrl</code></td>\n</tr>\n<tr>\n<td>upload-text</td>\n<td>\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>image-fit</td>\n<td>\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/zh-CN/image" target="_blank">Image</a> \u7EC4\u4EF6</td>\n<td><em>string</em></td>\n<td><code>cover</code></td>\n</tr>\n<tr>\n<td>upload-icon</td>\n<td>\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 <a href="#/zh-CN/icon#props" target="_blank">name \u5C5E\u6027</a></td>\n<td><em>string</em></td>\n<td><code>photograph</code></td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>\u6CE8\u610F\uFF1Aaccept\u3001capture \u548C multiple \u4E3A\u6D4F\u89C8\u5668 input \u6807\u7B7E\u7684\u539F\u751F\u5C5E\u6027\uFF0C\u79FB\u52A8\u7AEF\u5404\u79CD\u673A\u578B\u5BF9\u8FD9\u4E9B\u5C5E\u6027\u7684\u652F\u6301\u7A0B\u5EA6\u6709\u6240\u5DEE\u5F02\uFF0C\u56E0\u6B64\u5728\u4E0D\u540C\u673A\u578B\u548C WebView \u4E0B\u53EF\u80FD\u51FA\u73B0\u4E00\u4E9B\u517C\u5BB9\u6027\u95EE\u9898\u3002</p>\n</blockquote>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>\u4E8B\u4EF6\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u56DE\u8C03\u53C2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>oversize</td>\n<td>\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236\u65F6\u89E6\u53D1</td>\n<td>\u540C <code>after-read</code></td>\n</tr>\n<tr>\n<td>click-upload</td>\n<td>\u70B9\u51FB\u4E0A\u4F20\u533A\u57DF\u65F6\u89E6\u53D1</td>\n<td><em>event: MouseEvent</em></td>\n</tr>\n<tr>\n<td>click-preview</td>\n<td>\u70B9\u51FB\u9884\u89C8\u56FE\u65F6\u89E6\u53D1</td>\n<td>\u540C <code>after-read</code></td>\n</tr>\n<tr>\n<td>click-reupload</td>\n<td>\u70B9\u51FB\u8986\u76D6\u4E0A\u4F20\u65F6\u89E6\u53D1</td>\n<td>\u540C <code>after-read</code></td>\n</tr>\n<tr>\n<td>close-preview</td>\n<td>\u5173\u95ED\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u65F6\u89E6\u53D1</td>\n<td>-</td>\n</tr>\n<tr>\n<td>delete</td>\n<td>\u5220\u9664\u6587\u4EF6\u9884\u89C8\u65F6\u89E6\u53D1</td>\n<td>\u540C <code>after-read</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>\u540D\u79F0</th>\n<th>\u8BF4\u660E</th>\n<th>\u53C2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF</td>\n<td>-</td>\n</tr>\n<tr>\n<td>preview-delete</td>\n<td>\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u94AE</td>\n<td>-</td>\n</tr>\n<tr>\n<td>preview-cover</td>\n<td>\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9</td>\n<td><em>item: FileListItem</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="hui-diao-can-shu" tabindex="-1">\u56DE\u8C03\u53C2\u6570</h3>\n<p>before-read\u3001after-read\u3001before-delete \u6267\u884C\u65F6\u4F1A\u4F20\u9012\u4EE5\u4E0B\u56DE\u8C03\u53C2\u6570\uFF1A</p>\n<table>\n<thead>\n<tr>\n<th>\u53C2\u6570\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u7C7B\u578B</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>file</td>\n<td>file \u5BF9\u8C61</td>\n<td><em>object</em></td>\n</tr>\n<tr>\n<td>detail</td>\n<td>\u989D\u5916\u4FE1\u606F\uFF0C\u5305\u542B name \u548C index \u5B57\u6BB5</td>\n<td><em>object</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="resulttype-ke-xuan-zhi" tabindex="-1">ResultType \u53EF\u9009\u503C</h3>\n<p><code>result-type</code> \u5B57\u6BB5\u8868\u793A\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7684\u7C7B\u578B\uFF0C\u4E0A\u4F20\u5927\u6587\u4EF6\u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u7528 file \u7C7B\u578B\uFF0C\u907F\u514D\u5361\u987F\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u503C</th>\n<th>\u63CF\u8FF0</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>file</td>\n<td>\u7ED3\u679C\u4EC5\u5305\u542B File \u5BF9\u8C61</td>\n</tr>\n<tr>\n<td>text</td>\n<td>\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u7684\u6587\u672C\u5185\u5BB9</td>\n</tr>\n<tr>\n<td>dataUrl</td>\n<td>\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u5BF9\u5E94\u7684 base64 \u7F16\u7801</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3>\n<p>\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Uploader \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1<a href="#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa" target="_blank">\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5</a>\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u65B9\u6CD5\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u53C2\u6570</th>\n<th>\u8FD4\u56DE\u503C</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>closeImagePreview</td>\n<td>\u5173\u95ED\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8</td>\n<td>-</td>\n<td>-</td>\n</tr>\n<tr>\n<td>chooseFile</td>\n<td>\u4E3B\u52A8\u8C03\u8D77\u6587\u4EF6\u9009\u62E9\uFF0C\u7531\u4E8E\u6D4F\u89C8\u5668\u5B89\u5168\u9650\u5236\uFF0C\u53EA\u6709\u5728\u7528\u6237\u89E6\u53D1\u64CD\u4F5C\u7684\u4E0A\u4E0B\u6587\u4E2D\u8C03\u7528\u624D\u6709\u6548</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="lei-xing-ding-yi" tabindex="-1">\u7C7B\u578B\u5B9A\u4E49</h3>\n<p>\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n <span class="hljs-title class_">UploaderProps</span>,\n <span class="hljs-title class_">UploaderInstance</span>,\n <span class="hljs-title class_">UploaderResultType</span>,\n <span class="hljs-title class_">UploaderFileListItem</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>UploaderInstance</code> \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">UploaderInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> uploaderRef = ref<<span class="hljs-title class_">UploaderInstance</span>>();\n\nuploaderRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">chooseFile</span>();\n</code></pre>\n</div><h2 id="zhu-ti-ding-zhi" tabindex="-1">\u4E3B\u9898\u5B9A\u5236</h2>\n<div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3>\n<p>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 <a href="#/zh-CN/config-provider" target="_blank">ConfigProvider \u7EC4\u4EF6</a>\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u540D\u79F0</th>\n<th>\u9ED8\u8BA4\u503C</th>\n<th>\u63CF\u8FF0</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-uploader-size</td>\n<td><em>80px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-icon-size</td>\n<td><em>24px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-icon-color</td>\n<td><em>var(--van-gray-4)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-text-color</td>\n<td><em>var(--van-text-color-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-text-font-size</td>\n<td><em>var(--van-font-size-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-upload-background</td>\n<td><em>var(--van-gray-1)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-upload-active-color</td>\n<td><em>var(--van-active-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-delete-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-delete-icon-size</td>\n<td><em>14px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-delete-background</td>\n<td><em>rgba(0, 0, 0, 0.7)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-background</td>\n<td><em>var(--van-background)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-icon-size</td>\n<td><em>20px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-icon-color</td>\n<td><em>var(--van-gray-7)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-name-padding</td>\n<td><em>0 var(--van-padding-base)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-name-margin-top</td>\n<td><em>var(--van-padding-xs)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-name-font-size</td>\n<td><em>var(--van-font-size-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-file-name-text-color</td>\n<td><em>var(--van-gray-7)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-mask-text-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-mask-background</td>\n<td><em>fade(var(--van-gray-8), 88%)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-mask-icon-size</td>\n<td><em>22px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-mask-message-font-size</td>\n<td><em>var(--van-font-size-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-mask-message-line-height</td>\n<td><em>var(--van-line-height-xs)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-loading-icon-size</td>\n<td><em>22px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-loading-icon-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-disabled-opacity</td>\n<td><em>var(--van-disabled-opacity)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-uploader-border-radius</td>\n<td><em>0px</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2>\n<div class="van-doc-card"><h3 id="uploader-zai-bu-fen-an-zhuo-ji-xing-shang-wu-fa-shang-chuan-tu-pian" tabindex="-1">Uploader \u5728\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0A\u65E0\u6CD5\u4E0A\u4F20\u56FE\u7247\uFF1F</h3>\n<p>Uploader \u91C7\u7528\u4E86 HTML \u539F\u751F\u7684 <code><input type="file" /></code> \u6807\u7B7E\u8FDB\u884C\u4E0A\u4F20\uFF0C\u80FD\u5426\u4E0A\u4F20\u53D6\u51B3\u4E8E\u5F53\u524D\u7CFB\u7EDF\u548C\u6D4F\u89C8\u5668\u7684\u517C\u5BB9\u6027\u3002\u5F53\u9047\u5230\u65E0\u6CD5\u4E0A\u4F20\u7684\u95EE\u9898\u65F6\uFF0C\u4E00\u822C\u6709\u4EE5\u4E0B\u51E0\u79CD\u60C5\u51B5\uFF1A</p>\n<ol>\n<li>\u9047\u5230\u4E86\u5B89\u5353 App WebView \u7684\u517C\u5BB9\u6027\u95EE\u9898\uFF0C\u9700\u8981\u5728\u5B89\u5353\u539F\u751F\u4EE3\u7801\u4E2D\u8FDB\u884C\u517C\u5BB9\uFF0C\u53EF\u4EE5\u53C2\u8003\u6B64<a href="https://blog.csdn.net/qq_32756581/article/details/112861088" target="_blank">\u6587\u7AE0</a>\u3002</li>\n<li>\u56FE\u7247\u683C\u5F0F\u4E0D\u6B63\u786E\uFF0C\u5728\u5F53\u524D\u7CFB\u7EDF/\u6D4F\u89C8\u5668\u4E2D\u65E0\u6CD5\u8BC6\u522B\uFF0C\u6BD4\u5982 <code>webp</code> \u6216 <code>heic</code> \u683C\u5F0F\u3002</li>\n<li>\u5176\u4ED6\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\u95EE\u9898\u3002</li>\n</ol>\n</div><div class="van-doc-card"><h3 id="pai-zhao-shang-chuan-de-tu-pian-bei-xuan-zhuan-90-du" tabindex="-1">\u62CD\u7167\u4E0A\u4F20\u7684\u56FE\u7247\u88AB\u65CB\u8F6C 90 \u5EA6\uFF1F</h3>\n<p>\u90E8\u5206\u624B\u673A\u5728\u62CD\u7167\u4E0A\u4F20\u65F6\u4F1A\u51FA\u73B0\u56FE\u7247\u88AB\u65CB\u8F6C 90 \u5EA6\u7684\u95EE\u9898\uFF0C\u8FD9\u4E2A\u95EE\u9898\u53EF\u4EE5\u901A\u8FC7 <a href="https://github.com/fengyuanchen/compressorjs" target="_blank">compressorjs</a> \u6216\u5176\u4ED6\u5F00\u6E90\u5E93\u8FDB\u884C\u5904\u7406\u3002</p>\n<p>compressorjs \u662F\u4E00\u4E2A\u5F00\u6E90\u7684\u56FE\u7247\u5904\u7406\u5E93\uFF0C\u63D0\u4F9B\u4E86\u56FE\u7247\u538B\u7F29\u3001\u56FE\u7247\u65CB\u8F6C\u7B49\u80FD\u529B\u3002</p>\n<h4 id="shi-li" tabindex="-1">\u793A\u4F8B</h4>\n<p>\u4F7F\u7528 compressorjs \u8FDB\u884C\u5904\u7406\u7684\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B:</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">:before-read</span>=<span class="hljs-string">"beforeRead"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Compressor</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'compressorjs'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeRead</span> = (<span class="hljs-params">file</span>) =>\n <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {\n <span class="hljs-comment">// compressorjs \u9ED8\u8BA4\u5F00\u542F checkOrientation \u9009\u9879</span>\n <span class="hljs-comment">// \u4F1A\u5C06\u56FE\u7247\u4FEE\u6B63\u4E3A\u6B63\u786E\u65B9\u5411</span>\n <span class="hljs-keyword">new</span> <span class="hljs-title class_">Compressor</span>(file, {\n <span class="hljs-attr">success</span>: resolve,\n <span class="hljs-title function_">error</span>(<span class="hljs-params">err</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err.<span class="hljs-property">message</span>);\n },\n });\n });\n\n <span class="hljs-keyword">return</span> {\n beforeRead,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="shang-chuan-tu-pian-shi-chu-xian-liu-lan-qi-shua-xin-huo-qia-dun-xian-xiang" tabindex="-1">\u4E0A\u4F20\u56FE\u7247\u65F6\u51FA\u73B0\u6D4F\u89C8\u5668\u5237\u65B0\u6216\u5361\u987F\u73B0\u8C61\uFF1F</h3>\n<p>\u8FD9\u79CD\u73B0\u8C61\u4E00\u822C\u662F\u5185\u5B58\u4E0D\u8DB3\u5BFC\u81F4\u7684\uFF0C\u901A\u5E38\u53D1\u751F\u5728\u65E7\u673A\u578B\u4E0A\uFF1B\u4E0A\u4F20\u4E00\u5F20\u8F83\u5927\u7684\u56FE\u7247\u5F15\u8D77\u4E5F\u5F15\u8D77\u6B64\u73B0\u8C61\u3002</p>\n<p>\u4E3A\u4E86\u51CF\u5C11\u8FD9\u79CD\u60C5\u51B5\u7684\u51FA\u73B0\uFF0C\u53EF\u4EE5\u5728\u4E0A\u4F20\u56FE\u7247\u524D\u5BF9\u56FE\u7247\u8FDB\u884C\u538B\u7F29\uFF0C\u538B\u7F29\u65B9\u6CD5\u8BF7\u53C2\u8003\u4E0A\u6587\u4E2D\u63D0\u5230\u7684 <code>compressorjs</code> \u5E93\u3002</p>\n</div><div class="van-doc-card"><h3 id="shang-chuan-heic-heif-ge-shi-de-tu-pian-hou-wu-fa-zhan-shi" tabindex="-1">\u4E0A\u4F20 HEIC/HEIF \u683C\u5F0F\u7684\u56FE\u7247\u540E\u65E0\u6CD5\u5C55\u793A\uFF1F</h3>\n<p>\u76EE\u524D Chrome\u3001Safari \u7B49\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u5C55\u793A HEIC/HEIF \u683C\u5F0F\u7684\u56FE\u7247\uFF0C\u56E0\u6B64\u4E0A\u4F20\u540E\u65E0\u6CD5\u5728 Uploader \u7EC4\u4EF6\u4E2D\u8FDB\u884C\u9884\u89C8\u3002</p>\n<p>[HEIF] \u683C\u5F0F\u7684\u517C\u5BB9\u6027\u8BF7\u53C2\u8003 <a href="https://caniuse.com/?search=heic" target="_blank">caniuse</a>\u3002</p>\n</div><div class="van-doc-card"><h3 id="ru-he-pan-duan-yong-hu-shou-yu-liao-she-xiang-tou-quan-xian" tabindex="-1">\u5982\u4F55\u5224\u65AD\u7528\u6237\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF1F</h3>\n<p>\u5728\u4E0A\u4F20\u56FE\u7247\u65F6\uFF0C\u5982\u679C\u7528\u6237\u6CA1\u6709\u6388\u4E88\u5F53\u524D App \u6444\u50CF\u5934\u6743\u9650\uFF0C\u4F1A\u5BFC\u81F4 Uploader \u7EC4\u4EF6\u65E0\u6CD5\u4F7F\u7528\u3002</p>\n<p>\u4F60\u53EF\u4EE5\u901A\u8FC7\u6D4F\u89C8\u5668\u63D0\u4F9B\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia" target="_blank">getUserMedia</a> \u65B9\u6CD5\u6765\u5224\u65AD\u662F\u5426\u88AB\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF08\u8BF7\u7559\u610F <code>getUserMedia</code> \u65B9\u6CD5\u65E0\u6CD5\u5728 iOS 10 \u4E2D\u4F7F\u7528\uFF09\u3002</p>\n<p>\u4EE5\u4E0B\u662F\u4E00\u4E2A\u7B80\u5316\u7684\u793A\u4F8B\uFF1A</p>\n<pre><code class="language-ts">navigator.<span class="hljs-property">mediaDevices</span>\n .<span class="hljs-title function_">getUserMedia</span>({ <span class="hljs-attr">video</span>: <span class="hljs-literal">true</span> })\n .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">stream</span>) =></span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(stream);\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err);\n });\n</code></pre>\n</div>'},null,8,e))}}}]); |