import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},l=t(`

Uploader \u6587\u4EF6\u4E0A\u4F20

\u4ECB\u7ECD

\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

\u5F15\u5165

\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

import { createApp } from 'vue';
import { Uploader } from 'vant';

const app = createApp();
app.use(Uploader);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\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

<van-uploader :after-read="afterRead" />

export default {
  setup() {
    const afterRead = (file) => {
      // \u6B64\u65F6\u53EF\u4EE5\u81EA\u884C\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668
      console.log(file);
    };

    return {
      afterRead,
    };
  },
};

\u6587\u4EF6\u9884\u89C8

\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

<van-uploader v-model="fileList" multiple />

import { ref } from 'vue';

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

    return {
      fileList,
    };
  },
};

\u4E0A\u4F20\u72B6\u6001

\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

<van-uploader v-model="fileList" :after-read="afterRead" />

import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
        status: 'uploading',
        message: '\u4E0A\u4F20\u4E2D...',
      },
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
        status: 'failed',
        message: '\u4E0A\u4F20\u5931\u8D25',
      },
    ]);

    const afterRead = (file) => {
      file.status = 'uploading';
      file.message = '\u4E0A\u4F20\u4E2D...';

      setTimeout(() => {
        file.status = 'failed';
        file.message = '\u4E0A\u4F20\u5931\u8D25';
      }, 1000);
    };

    return {
      fileList,
      afterRead,
    };
  },
};

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

\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

<van-uploader v-model="fileList" multiple :max-count="2" />

import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    return {
      fileList,
    };
  },
};

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

\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

<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />

import { Toast } from 'vant';

export default {
  setup() {
    const onOversize = (file) => {
      console.log(file);
      Toast('\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 500kb');
    };

    return {
      onOversize,
    };
  },
};

\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

<van-uploader multiple :max-size="isOverSize" />

import { Toast } from 'vant';

export default {
  setup() {
    const isOverSize = (file) => {
      const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;
      return file.size >= maxSize;
    };
    return {
      isOverSize,
    };
  },
};

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

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

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

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

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

<van-uploader v-model="fileList">
  <template #preview-cover="{ file }">
    <div class="preview-cover van-ellipsis">{{ file.name }}</div>
  </template>
</van-uploader>

<style>
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>

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

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

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

\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

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

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

\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

<van-uploader :before-read="beforeRead" />

import { Toast } from 'vant';

export default {
  setup() {
    // \u8FD4\u56DE\u5E03\u5C14\u503C
    const beforeRead = (file) => {
      if (file.type !== 'image/jpeg') {
        Toast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');
        return false;
      }
      return true;
    };

    // \u8FD4\u56DE Promise
    const asyncBeforeRead = (file) =>
      new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');
          reject();
        } else {
          const img = new File(['foo'], 'bar.jpg', {
            type: 'image/jpeg',
          });
          resolve(img);
        }
      });

    return {
      beforeRead,
      asyncBeforeRead,
    };
  },
};

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

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

<van-uploader disabled />

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

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

<van-uploader v-model="fileList" :deletable="false" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const fileList = ref([
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
        deletable: true,
        beforeDelete: () => {
          Toast('\u5220\u9664\u524D\u7F6E\u5904\u7406');
        },
      },
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
        imageFit: 'contain',
      },
    ]);

    return { fileList };
  },
};

API

Props

\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 v3.1.5\u662F\u5426\u5C06\u4E0A\u4F20\u533A\u57DF\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001booleanfalse
deletable\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AEbooleantrue
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 v3.0.17\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

\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

Events

\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 v3.1.5\u70B9\u51FB\u4E0A\u4F20\u533A\u57DF\u65F6\u89E6\u53D1event: MouseEvent
click-preview\u70B9\u51FB\u9884\u89C8\u56FE\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

Slots

\u540D\u79F0\u8BF4\u660E\u53C2\u6570
default\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF-
preview-delete v3.5.0\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

\u56DE\u8C03\u53C2\u6570

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

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

ResultType \u53EF\u9009\u503C

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

\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

\u65B9\u6CD5

\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

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

\u7C7B\u578B\u5B9A\u4E49

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

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

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

import { ref } from 'vue';
import type { UploaderInstance } from 'vant';

const uploaderRef = ref<UploaderInstance>();

uploaderRef.value?.chooseFile();

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\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

\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-background-colorvar(--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-background-colorrgba(0, 0, 0, 0.7)-
--van-uploader-file-background-colorvar(--van-background-color)-
--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-background-colorfade(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)-

\u5E38\u89C1\u95EE\u9898

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

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

  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. \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. \u5176\u4ED6\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\u95EE\u9898\u3002

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

\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

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

\u793A\u4F8B

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

<van-uploader :before-read="beforeRead" />

import Compressor from 'compressorjs';

export default {
  setup() {
    const beforeRead = (file) =>
      new Promise((resolve) => {
        // compressorjs \u9ED8\u8BA4\u5F00\u542F checkOrientation \u9009\u9879
        // \u4F1A\u5C06\u56FE\u7247\u4FEE\u6B63\u4E3A\u6B63\u786E\u65B9\u5411
        new Compressor(file, {
          success: resolve,
          error(err) {
            console.log(err.message);
          },
        });
      });

    return {
      beforeRead,
    };
  },
};

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

\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

\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

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

\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

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

`,30),p=[l],h={__name:"README.zh-CN",setup(d,{expose:s}){return s({frontmatter:{}}),(c,o)=>(a(),n("div",e,p))}};export{h as default};