Uploader 上传

介绍

用于将本地的图片或文件上传至服务器。

安装

import { createApp } from 'vue';
import { Uploader } from '@nutui/nutui';
const app = createApp();
app.use(Uploader);

代码示例

基本用法

<nut-uploader url="http://服务器地址"></nut-uploader>

自定义上传样式

<nut-uploader url="http://服务器地址">
  <nut-button type="primary" icon="uploader">上传文件</nut-button>
</nut-uploader>

直接调起摄像头（移动端生效）

<nut-uploader url="http://服务器地址" capture></nut-uploader>

限制上传数量5个

<nut-uploader url="http://服务器地址" multiple maximum="5"></nut-uploader>

限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）

<nut-uploader url="http://服务器地址" multiple :maximize="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>

setup() {
    const formData = {
      custom: 'test'
    };
    const onOversize = (files: File[]) => {
      console.log('oversize 触发 文件大小不能超过 50kb', files);
    };
    const beforeUpload = (files: File[]) => {
      //自定义处理
      return files;
    }
    return {
      onOversize,
      formData
    };
}

自定义 FormData headers

<nut-uploader url="http://服务器地址" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>

setup() {
    const formData = {
      custom: 'test'
    };
    const onOversize = (files: File[]) => {
      console.log('oversize 触发 文件大小不能超过 50kb', files);
    };
    return {
      onOversize,
      formData
    };
}

禁用状态

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

API

Prop

FileItem

Event