import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Uploader \u4E0A\u4F20

\u4ECB\u7ECD

\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Uploader,Icon,Progress } from '@nutui/nutui';

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

\u57FA\u672C\u7528\u6CD5

<nut-uploader :url="uploadUrl"></nut-uploader>

\u4E0A\u4F20\u72B6\u6001

<nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>

\u57FA\u7840\u7528\u6CD5-\u4E0A\u4F20\u5217\u8868\u5C55\u793A

<nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type='list'>
  <nut-button type="success" size="small">\u4E0A\u4F20\u6587\u4EF6</nut-button>
</nut-uploader>

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

<nut-uploader :url="uploadUrl">
  <nut-button type="success" size="small">\u4E0A\u4F20\u6587\u4EF6</nut-button>
</nut-uploader>

\u81EA\u5B9A\u4E49\u4E0A\u4F20\u4F7F\u7528\u9ED8\u8BA4\u8FDB\u5EA6\u6761

<nut-uploader :url="uploadUrl" @progress="onProgress">
  <nut-button type="success" size="small">\u4E0A\u4F20\u6587\u4EF6</nut-button>
</nut-uploader>
<br />
<nut-progress :percentage="progressPercentage"
  stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
  :status="progressPercentage==100?'':'active'">
</nut-progress>

\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934\uFF08\u79FB\u52A8\u7AEF\u751F\u6548\uFF09

<nut-uploader :url="uploadUrl" capture></nut-uploader>

\u9650\u5236\u4E0A\u4F20\u6570\u91CF5\u4E2A

<nut-uploader :url="uploadUrl" multiple maximum="5"></nut-uploader>

\u9650\u5236\u4E0A\u4F20\u5927\u5C0F\uFF08\u6BCF\u4E2A\u6587\u4EF6\u6700\u5927\u4E0D\u8D85\u8FC7 50kb\uFF0C\u4E5F\u53EF\u4EE5\u5728beforeupload\u4E2D\u81EA\u884C\u5904\u7406\u6587\u4EF6\u56FE\u7247\u538B\u7F29\uFF09

<nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>

\u81EA\u5B9A\u4E49 FormData headers

<nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>

\u9009\u4E2D\u6587\u4EF6\u540E\uFF0C\u901A\u8FC7\u6309\u94AE\u624B\u52A8\u6267\u884C\u4E0A\u4F20

<nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
<br />
<nut-button type="success" size="small" @click="submitUpload">\u6267\u884C\u4E0A\u4F20</nut-button>

\u7981\u7528\u72B6\u6001

<nut-uploader disabled></nut-uploader>

import { ref } from 'vue';
setup() {
  const uploadUrl = 'http://\u670D\u52A1\u5668\u5730\u5740';
  const progressPercentage = ref<string | number>(0);
  const formData = {
    custom: 'test'
  };
  const defaultFileList = ref([
    {
      name: '\u6587\u4EF61.png',
      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
      status: 'success',
      message: '\u4E0A\u4F20\u6210\u529F',
      type: 'image'
    },
    {
      name: '\u6587\u4EF62.png',
      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
      status: 'error',
      message: '\u4E0A\u4F20\u5931\u8D25',
      type: 'image'
    },
    {
      name: '\u6587\u4EF63.png',
      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
      status: 'uploading',
      message: '\u4E0A\u4F20\u4E2D...',
      type: 'image'
    }
  ]);
  const fileToDataURL = (file: Blob): Promise<any> => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = (e) => resolve((e.target as FileReader).result);
      reader.readAsDataURL(file);
    });
  };
  const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
    return new Promise((resolve) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.src = dataURL;
    });
  };
  const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
    return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
  };
  const onOversize = (files: File[]) => {
    console.log('oversize \u89E6\u53D1 \u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 50kb', files);
  };
  const onDelete = (file: FileItem, fileList: FileItem[]) => {
    console.log('delete \u4E8B\u4EF6\u89E6\u53D1', file, fileList);
  };
  const onProgress = ({ event, options, percentage }: any) => {
    progressPercentage.value = percentage;
    console.log('progress \u4E8B\u4EF6\u89E6\u53D1', percentage);
  };
  const beforeUpload = async (file: File[]) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d') as CanvasRenderingContext2D;
    const base64 = await fileToDataURL(file[0]);
    const img = await dataURLToImage(base64);
    canvas.width = img.width;
    canvas.height = img.height;

    context.clearRect(0, 0, img.width, img.height);
    context.drawImage(img, 0, 0, img.width, img.height);

    let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5\u53EF\u6839\u636E\u5B9E\u9645\u60C5\u51B5\u8BA1\u7B97
    const f = await new File([blob], file[0].name);
    return [f];
  };
  const uploadRef = ref<any>(null);
  const submitUpload = () => {
    uploadRef.value.submit();
  };
  return {
    onOversize,
    beforeUpload,
    onDelete,
    onProgress,
    progressPercentage,
    uploadUrl,
    defaultFileList,
    formData,
    uploadRef,
    submitUpload
  };
}

Prop

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
auto-upload\u662F\u5426\u5728\u9009\u53D6\u6587\u4EF6\u540E\u7ACB\u5373\u8FDB\u884C\u4E0A\u4F20\uFF0Cfalse \u65F6\u9700\u8981\u624B\u52A8\u6267\u884C ref submit \u65B9\u6CD5\u8FDB\u884C\u4E0A\u4F20Booleantrue
nameinput \u6807\u7B7E name \u7684\u540D\u79F0\uFF0C\u53D1\u5230\u540E\u53F0\u7684\u6587\u4EF6\u53C2\u6570\u540DString\u201Cfile\u201D
url\u4E0A\u4F20\u670D\u52A1\u5668\u7684\u63A5\u53E3\u5730\u5740String-
v-model:file-list\u9ED8\u8BA4\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868FileItem[][]
is-preview\u662F\u5426\u4E0A\u4F20\u6210\u529F\u540E\u5C55\u793A\u9884\u89C8\u56FEBooleantrue
is-deletable\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AEBooleantrue
method\u4E0A\u4F20\u8BF7\u6C42\u7684 http methodString\u201Cpost\u201D
list-type\u4E0A\u4F20\u5217\u8868\u7684\u5185\u5EFA\u6837\u5F0F\uFF0C\u652F\u6301\u4E24\u79CD\u57FA\u672C\u6837\u5F0F picture\u3001listString\u201Cpicture\u201D
capture\u56FE\u7247\u9009\u53D6\u6A21\u5F0F\uFF0C\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934Stringfalse
maximize\u53EF\u4EE5\u8BBE\u5B9A\u6700\u5927\u4E0A\u4F20\u6587\u4EF6\u7684\u5927\u5C0F\uFF08\u5B57\u8282\uFF09Number\u4E28StringNumber.MAX_VALUE
maximum\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236Number\u4E28String1
clear-input\u662F\u5426\u9700\u8981\u6E05\u7A7Ainput\u5185\u5BB9\uFF0C\u8BBE\u4E3Atrue\u652F\u6301\u91CD\u590D\u9009\u62E9\u4E0A\u4F20\u540C\u4E00\u4E2A\u6587\u4EF6Booleantrue
accept\u5141\u8BB8\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u8BE6\u7EC6\u8BF4\u660EString*
headers\u8BBE\u7F6E\u4E0A\u4F20\u7684\u8BF7\u6C42\u5934\u90E8Object{}
data\u9644\u52A0\u4E0A\u4F20\u7684\u4FE1\u606F formDataObject{}
upload-icon\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5String\u201Cphotograph\u201D
upload-icon-size\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u5C3A\u5BF8\u5927\u5C0F\uFF0C\u5982 20px 2em 2remString or Number-
xhr-state\u63A5\u53E3\u54CD\u5E94\u7684\u6210\u529F\u72B6\u6001\uFF08status\uFF09\u503CNumber200
with-credentials\u652F\u6301\u53D1\u9001 cookie \u51ED\u8BC1\u4FE1\u606FBooleanfalse
multiple\u662F\u5426\u652F\u6301\u6587\u4EF6\u591A\u9009Booleanfalse
disabled\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20Booleanfalse
timeout\u8D85\u65F6\u65F6\u95F4\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2Number\u4E28String1000 * 30
before-upload\u4E0A\u4F20\u524D\u7684\u51FD\u6570\u9700\u8981\u8FD4\u56DE\u4E00\u4E2APromise\u5BF9\u8C61Functionnull
before-delete\u9664\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u503C\u4E3A false \u65F6\u4E0D\u79FB\u9664\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 resolve(false) \u6216 reject \u65F6\u4E0D\u79FB\u9664Function(file): boolean \u4E28Promise-

FileItem

\u540D\u79F0\u8BF4\u660E\u9ED8\u8BA4\u503C
status\u6587\u4EF6\u72B6\u6001\u503C\uFF0C\u53EF\u9009\u2019ready,uploading,success,error\u2019\u201Cready\u201D
uid\u6587\u4EF6\u7684\u552F\u4E00\u6807\u8BC6new Date().getTime().toString()
name\u6587\u4EF6\u540D\u79F0\u201C\u201D
url\u6587\u4EF6\u8DEF\u5F84\u201C\u201D
type\u6587\u4EF6\u7C7B\u578B\u201Cimage/jpeg\u201D
formData\u4E0A\u4F20\u6240\u9700\u7684datanew FormData()

Event

\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
start\u6587\u4EF6\u4E0A\u4F20\u5F00\u59CBoptions
progress\u6587\u4EF6\u4E0A\u4F20\u7684\u8FDB\u5EA6{event,option,percentage}
oversize\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236\u65F6\u89E6\u53D1files
success\u4E0A\u4F20\u6210\u529F{responseText,option,fileItem}
failure\u4E0A\u4F20\u5931\u8D25{responseText,option,fileItem}
change\u4E0A\u4F20\u6587\u4EF6\u6539\u53D8\u65F6\u7684\u72B6\u6001{fileList,event}
delete\u6587\u4EF6\u5220\u9664\u4E4B\u524D\u7684\u72B6\u6001{files,fileList}
file-item-click\u6587\u4EF6\u4E0A\u4F20\u6210\u529F\u540E\u70B9\u51FB\u89E6\u53D1{fileItem}

Methods

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Uploader \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
submit\u624B\u52A8\u4E0A\u4F20\u6A21\u5F0F\uFF0C\u6267\u884C\u4E0A\u4F20\u64CD\u4F5C--
clearUploadQueue\u6E05\u7A7A\u5DF2\u9009\u62E9\u7684\u6587\u4EF6\u961F\u5217\uFF08\u8BE5\u65B9\u6CD5\u4E00\u822C\u914D\u5408\u5728\u624B\u52A8\u6A21\u5F0F\u4E0A\u4F20\u65F6\u4F7F\u7528\uFF09--
`,37),e=[p],u={setup(r,{expose:s}){return s({frontmatter:{}}),(c,o)=>(t(),a("div",l,e))}};export{u as default};