/*! 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:'

Uploader \u6587\u4EF6\u4E0A\u4F20

\n

\u4ECB\u7ECD

\n

\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

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Uploader } from 'vant';\n\nconst app = createApp();\napp.use(Uploader);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1 after-read \u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684 file \u5BF9\u8C61\u3002

\n
<van-uploader :after-read="afterRead" />\n
\n
export default {\n  setup() {\n    const afterRead = (file) => {\n      // \u6B64\u65F6\u53EF\u4EE5\u81EA\u884C\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\n      console.log(file);\n    };\n\n    return {\n      afterRead,\n    };\n  },\n};\n
\n

\u6587\u4EF6\u9884\u89C8

\n

\u901A\u8FC7 v-model \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

\n
<van-uploader v-model="fileList" multiple />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const fileList = ref([\n      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n      // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6\n      // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E\n      { url: 'https://cloud-image', isImage: true },\n    ]);\n\n    return {\n      fileList,\n    };\n  },\n};\n
\n

\u4E0A\u4F20\u72B6\u6001

\n

\u901A\u8FC7 status \u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0Cuploading \u8868\u793A\u4E0A\u4F20\u4E2D\uFF0Cfailed \u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0Cdone \u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002

\n
<van-uploader v-model="fileList" :after-read="afterRead" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const fileList = ref([\n      {\n        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',\n        status: 'uploading',\n        message: '\u4E0A\u4F20\u4E2D...',\n      },\n      {\n        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n        status: 'failed',\n        message: '\u4E0A\u4F20\u5931\u8D25',\n      },\n    ]);\n\n    const afterRead = (file) => {\n      file.status = 'uploading';\n      file.message = '\u4E0A\u4F20\u4E2D...';\n\n      setTimeout(() => {\n        file.status = 'failed';\n        file.message = '\u4E0A\u4F20\u5931\u8D25';\n      }, 1000);\n    };\n\n    return {\n      fileList,\n      afterRead,\n    };\n  },\n};\n
\n

\u9650\u5236\u4E0A\u4F20\u6570\u91CF

\n

\u901A\u8FC7 max-count \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

\n
<van-uploader v-model="fileList" multiple :max-count="2" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const fileList = ref([]);\n\n    return {\n      fileList,\n    };\n  },\n};\n
\n

\u9650\u5236\u4E0A\u4F20\u5927\u5C0F

\n

\u901A\u8FC7 max-size \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 oversize \u4E8B\u4EF6\u83B7\u53D6\u3002

\n
<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const onOversize = (file) => {\n      console.log(file);\n      showToast('\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 500kb');\n    };\n\n    return {\n      onOversize,\n    };\n  },\n};\n
\n

\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 max-size \u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\uFF0C\u5728\u51FD\u6570\u4E2D\u901A\u8FC7 file.type \u533A\u5206\u6587\u4EF6\u7C7B\u578B\uFF0C\u8FD4\u56DE true \u8868\u793A\u8D85\u51FA\u9650\u5236\uFF0Cfalse \u8868\u793A\u672A\u8D85\u51FA\u9650\u5236\u3002

\n
<van-uploader multiple :max-size="isOverSize" />\n
\n
export default {\n  setup() {\n    const isOverSize = (file) => {\n      const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;\n      return file.size >= maxSize;\n    };\n    return {\n      isOverSize,\n    };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F

\n

\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002

\n
<van-uploader>\n  <van-button icon="plus" type="primary">\u4E0A\u4F20\u6587\u4EF6</van-button>\n</van-uploader>\n
\n

\u81EA\u5B9A\u4E49\u9884\u89C8\u6837\u5F0F

\n

\u901A\u8FC7 preview-cover \u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9\u3002

\n
<van-uploader v-model="fileList">\n  <template #preview-cover="{ file }">\n    <div class="preview-cover van-ellipsis">{{ file.name }}</div>\n  </template>\n</van-uploader>\n\n<style>\n  .preview-cover {\n    position: absolute;\n    bottom: 0;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 4px;\n    color: #fff;\n    font-size: 12px;\n    text-align: center;\n    background: rgba(0, 0, 0, 0.3);\n  }\n</style>\n
\n

\u81EA\u5B9A\u4E49\u9884\u89C8\u5927\u5C0F

\n

\u901A\u8FC7 preview-size \u5C5E\u6027\u5B9A\u4E49\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5927\u5C0F\u3002

\n
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px -->\n<van-uploader v-model="fileList" preview-size="60" />\n<!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw -->\n<van-uploader v-model="fileList" preview-size="5rem" />\n
\n

\u5C06 preview-size \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

\n
<van-uploader v-model="fileList" :preview-size="[60, 40]" />\n
\n

\u4E0A\u4F20\u524D\u7F6E\u5904\u7406

\n

\u901A\u8FC7\u4F20\u5165 beforeRead \u51FD\u6570\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u5904\u7406\uFF0C\u8FD4\u56DE true \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u8FD4\u56DE false \u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002\u652F\u6301\u8FD4\u56DE Promise \u5BF9 file \u5BF9\u8C61\u8FDB\u884C\u81EA\u5B9A\u4E49\u5904\u7406\uFF0C\u4F8B\u5982\u538B\u7F29\u56FE\u7247\u3002

\n
<van-uploader :before-read="beforeRead" />\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    // \u8FD4\u56DE\u5E03\u5C14\u503C\n    const beforeRead = (file) => {\n      if (file.type !== 'image/jpeg') {\n        showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n        return false;\n      }\n      return true;\n    };\n\n    // \u8FD4\u56DE Promise\n    const asyncBeforeRead = (file) =>\n      new Promise((resolve, reject) => {\n        if (file.type !== 'image/jpeg') {\n          showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n          reject();\n        } else {\n          const img = new File(['foo'], 'bar.jpg', {\n            type: 'image/jpeg',\n          });\n          resolve(img);\n        }\n      });\n\n    return {\n      beforeRead,\n      asyncBeforeRead,\n    };\n  },\n};\n
\n

\u7981\u7528\u6587\u4EF6\u4E0A\u4F20

\n

\u901A\u8FC7 disabled \u5C5E\u6027\u7981\u7528\u6587\u4EF6\u4E0A\u4F20\u3002

\n
<van-uploader disabled />\n
\n

\u81EA\u5B9A\u4E49\u5355\u4E2A\u56FE\u7247\u9884\u89C8

\n

\u5728 v-model \u6570\u7EC4\u4E2D\u8BBE\u7F6E\u5355\u4E2A\u9884\u89C8\u56FE\u7247\u5C5E\u6027\uFF0C\u652F\u6301 imageFit deletable previewSize beforeDelete\u3002

\n
<van-uploader v-model="fileList" :deletable="false" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const fileList = ref([\n      {\n        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',\n        deletable: true,\n        beforeDelete: () => {\n          showToast('\u5220\u9664\u524D\u7F6E\u5904\u7406');\n        },\n      },\n      {\n        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n        imageFit: 'contain',\n      },\n    ]);\n\n    return { fileList };\n  },\n};\n
\n

\u5F00\u542F\u8986\u76D6\u4E0A\u4F20

\n
<van-uploader v-model="fileList" reupload max-count="2" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const fileList = ref([\n      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n    ]);\n\n    return { fileList };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5DF2\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868FileListItem[]-
accept\u5141\u8BB8\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u8BE6\u7EC6\u8BF4\u660Estringimage/*
name\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\u53D6number | string-
preview-size\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string | Array80px
preview-image\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FEbooleantrue
preview-full-image\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8booleantrue
preview-options\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u7684\u914D\u7F6E\u9879\uFF0C\u53EF\u9009\u503C\u89C1 ImagePreviewobject-
multiple\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301booleanfalse
disabled\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20booleanfalse
readonly\u662F\u5426\u5C06\u4E0A\u4F20\u533A\u57DF\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001booleanfalse
deletable\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AEbooleantrue
reupload v4.4.0\u662F\u5426\u5F00\u542F\u8986\u76D6\u4E0A\u4F20\uFF0C\u5F00\u542F\u540E\u4F1A\u5173\u95ED\u56FE\u7247\u9884\u89C8booleanfalse
show-upload\u662F\u5426\u5C55\u793A\u4E0A\u4F20\u533A\u57DFbooleantrue
lazy-load\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528booleanfalse
capture\u56FE\u7247\u9009\u53D6\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A camera (\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934)string-
after-read\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E\u7684\u56DE\u8C03\u51FD\u6570Function-
before-read\u6587\u4EF6\u8BFB\u53D6\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C
\u652F\u6301\u8FD4\u56DE Promise		Function-
before-delete\u6587\u4EF6\u5220\u9664\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C
\u652F\u6301\u8FD4\u56DE Promise		Function-
max-size\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A bytenumber | string | (file: File) => booleanInfinity
max-count\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236number | stringInfinity
result-type\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A file textstringdataUrl
upload-text\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793Astring-
image-fit\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1 Image \u7EC4\u4EF6stringcover
upload-icon\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringphotograph
\n
\n

\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

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
oversize\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236\u65F6\u89E6\u53D1\u540C after-read
click-upload\u70B9\u51FB\u4E0A\u4F20\u533A\u57DF\u65F6\u89E6\u53D1event: MouseEvent
click-preview\u70B9\u51FB\u9884\u89C8\u56FE\u65F6\u89E6\u53D1\u540C after-read
click-reupload\u70B9\u51FB\u8986\u76D6\u4E0A\u4F20\u65F6\u89E6\u53D1\u540C after-read
close-preview\u5173\u95ED\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u65F6\u89E6\u53D1-
delete\u5220\u9664\u6587\u4EF6\u9884\u89C8\u65F6\u89E6\u53D1\u540C after-read
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E\u53C2\u6570
default\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF-
preview-delete\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u94AE-
preview-cover\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9item: FileListItem
\n

\u56DE\u8C03\u53C2\u6570

\n

before-read\u3001after-read\u3001before-delete \u6267\u884C\u65F6\u4F1A\u4F20\u9012\u4EE5\u4E0B\u56DE\u8C03\u53C2\u6570\uFF1A

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u540D\u8BF4\u660E\u7C7B\u578B
filefile \u5BF9\u8C61object
detail\u989D\u5916\u4FE1\u606F\uFF0C\u5305\u542B name \u548C index \u5B57\u6BB5object
\n

ResultType \u53EF\u9009\u503C

\n

result-type \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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u503C\u63CF\u8FF0
file\u7ED3\u679C\u4EC5\u5305\u542B File \u5BF9\u8C61
text\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u7684\u6587\u672C\u5185\u5BB9
dataUrl\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u5BF9\u5E94\u7684 base64 \u7F16\u7801
\n

\u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Uploader \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
closeImagePreview\u5173\u95ED\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8--
chooseFile\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--
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type {\n  UploaderProps,\n  UploaderInstance,\n  UploaderResultType,\n  UploaderFileListItem,\n} from 'vant';\n
\n

UploaderInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

\n
import { ref } from 'vue';\nimport type { UploaderInstance } from 'vant';\n\nconst uploaderRef = ref<UploaderInstance>();\n\nuploaderRef.value?.chooseFile();\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\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 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-uploader-size80px-
--van-uploader-icon-size24px-
--van-uploader-icon-colorvar(--van-gray-4)-
--van-uploader-text-colorvar(--van-text-color-2)-
--van-uploader-text-font-sizevar(--van-font-size-sm)-
--van-uploader-upload-backgroundvar(--van-gray-1)-
--van-uploader-upload-active-colorvar(--van-active-color)-
--van-uploader-delete-colorvar(--van-white)-
--van-uploader-delete-icon-size14px-
--van-uploader-delete-backgroundrgba(0, 0, 0, 0.7)-
--van-uploader-file-backgroundvar(--van-background)-
--van-uploader-file-icon-size20px-
--van-uploader-file-icon-colorvar(--van-gray-7)-
--van-uploader-file-name-padding0 var(--van-padding-base)-
--van-uploader-file-name-margin-topvar(--van-padding-xs)-
--van-uploader-file-name-font-sizevar(--van-font-size-sm)-
--van-uploader-file-name-text-colorvar(--van-gray-7)-
--van-uploader-mask-text-colorvar(--van-white)-
--van-uploader-mask-backgroundfade(var(--van-gray-8), 88%)-
--van-uploader-mask-icon-size22px-
--van-uploader-mask-message-font-sizevar(--van-font-size-sm)-
--van-uploader-mask-message-line-heightvar(--van-line-height-xs)-
--van-uploader-loading-icon-size22px-
--van-uploader-loading-icon-colorvar(--van-white)-
--van-uploader-disabled-opacityvar(--van-disabled-opacity)-
--van-uploader-border-radius0px-
\n

\u5E38\u89C1\u95EE\u9898

\n

Uploader \u5728\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0A\u65E0\u6CD5\u4E0A\u4F20\u56FE\u7247\uFF1F

\n

Uploader \u91C7\u7528\u4E86 HTML \u539F\u751F\u7684 <input type="file" /> \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

\n
    \n
  1. \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\u6587\u7AE0\u3002
    2. \n
  2. \u56FE\u7247\u683C\u5F0F\u4E0D\u6B63\u786E\uFF0C\u5728\u5F53\u524D\u7CFB\u7EDF/\u6D4F\u89C8\u5668\u4E2D\u65E0\u6CD5\u8BC6\u522B\uFF0C\u6BD4\u5982 webp \u6216 heic \u683C\u5F0F\u3002
    3. \n
  3. \u5176\u4ED6\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\u95EE\u9898\u3002
    4. \n
\n

\u62CD\u7167\u4E0A\u4F20\u7684\u56FE\u7247\u88AB\u65CB\u8F6C 90 \u5EA6\uFF1F

\n

\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 compressorjs \u6216\u5176\u4ED6\u5F00\u6E90\u5E93\u8FDB\u884C\u5904\u7406\u3002

\n

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

\n

\u793A\u4F8B

\n

\u4F7F\u7528 compressorjs \u8FDB\u884C\u5904\u7406\u7684\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B:

\n
<van-uploader :before-read="beforeRead" />\n
\n
import Compressor from 'compressorjs';\n\nexport default {\n  setup() {\n    const beforeRead = (file) =>\n      new Promise((resolve) => {\n        // compressorjs \u9ED8\u8BA4\u5F00\u542F checkOrientation \u9009\u9879\n        // \u4F1A\u5C06\u56FE\u7247\u4FEE\u6B63\u4E3A\u6B63\u786E\u65B9\u5411\n        new Compressor(file, {\n          success: resolve,\n          error(err) {\n            console.log(err.message);\n          },\n        });\n      });\n\n    return {\n      beforeRead,\n    };\n  },\n};\n
\n

\u4E0A\u4F20\u56FE\u7247\u65F6\u51FA\u73B0\u6D4F\u89C8\u5668\u5237\u65B0\u6216\u5361\u987F\u73B0\u8C61\uFF1F

\n

\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

\n

\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 compressorjs \u5E93\u3002

\n

\u4E0A\u4F20 HEIC/HEIF \u683C\u5F0F\u7684\u56FE\u7247\u540E\u65E0\u6CD5\u5C55\u793A\uFF1F

\n

\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

\n

[HEIF] \u683C\u5F0F\u7684\u517C\u5BB9\u6027\u8BF7\u53C2\u8003 caniuse\u3002

\n

\u5982\u4F55\u5224\u65AD\u7528\u6237\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF1F

\n

\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

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7\u6D4F\u89C8\u5668\u63D0\u4F9B\u7684 getUserMedia \u65B9\u6CD5\u6765\u5224\u65AD\u662F\u5426\u88AB\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF08\u8BF7\u7559\u610F getUserMedia \u65B9\u6CD5\u65E0\u6CD5\u5728 iOS 10 \u4E2D\u4F7F\u7528\uFF09\u3002

\n

\u4EE5\u4E0B\u662F\u4E00\u4E2A\u7B80\u5316\u7684\u793A\u4F8B\uFF1A

\n
navigator.mediaDevices\n  .getUserMedia({ video: true })\n  .then((stream) => {\n    console.log(stream);\n  })\n  .catch((err) => {\n    console.log(err);\n  });\n
\n
'},null,8,e))}}}]);