# Uploader 上传
### 介绍
用于将本地的图片或文件上传至服务器。
### 安装
``` javascript
import { createApp } from 'vue';
import { Uploader,Icon,Progress } from '@nutui/nutui';
const app = createApp();
app.use(Uploader);
app.use(Icon);
app.use(Progress);
```
### 基本用法
``` html
```
### 上传状态
``` html
```
### 基础用法-上传列表展示
``` html
上传文件
```
### 自定义上传样式
``` html
上传文件
```
### 自定义上传使用默认进度条
``` html
上传文件
```
### 直接调起摄像头（移动端生效）
``` html
```
### 限制上传数量5个
``` html
```
### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理文件图片压缩）
``` html
```
### 自定义 FormData headers
``` html
```
### 选中文件后，通过按钮手动执行上传
``` html
执行上传
```
### 禁用状态
``` html
```
``` javascript
import { ref } from 'vue';
setup() {
const uploadUrl = 'http://服务器地址';
const progressPercentage = ref(0);
const formData = {
custom: 'test'
};
const defaultFileList = ref([
{
name: '文件1.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'success',
message: '上传成功',
type: 'image'
},
{
name: '文件2.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'error',
message: '上传失败',
type: 'image'
},
{
name: '文件3.png',
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
status: 'uploading',
message: '上传中...',
type: 'image'
}
]);
const fileToDataURL = (file: Blob): Promise => {
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 => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(img);
img.src = dataURL;
});
};
const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise => {
return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
};
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files);
};
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log('delete 事件触发', file, fileList);
};
const onProgress = ({ event, options, percentage }: any) => {
progressPercentage.value = percentage;
console.log('progress 事件触发', 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可根据实际情况计算
const f = await new File([blob], file[0].name);
return [f];
};
const uploadRef = ref(null);
const submitUpload = () => {
uploadRef.value.submit();
};
return {
onOversize,
beforeUpload,
onDelete,
onProgress,
progressPercentage,
uploadUrl,
defaultFileList,
formData,
uploadRef,
submitUpload
};
}
```
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| auto-upload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| v-model:file-list | 默认已经上传的文件列表 | FileItem[] | [] |
| is-preview | 是否上传成功后展示预览图 | Boolean | true |
| is-deletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| list-type | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 |
| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
| accept | 允许上传的文件类型，[详细说明](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) | String | * |
| headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} |
| upload-icon | 上传区域[图标名称](#/icon)或图片链接 | String | "photograph" |
| upload-icon-size | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
| xhr-state | 接口响应的成功状态（status）值 | Number | 200 |
| with-credentials | 支持发送 cookie 凭证信息 | Boolean | false |
| multiple | 是否支持文件多选 | Boolean | false |
| disabled | 是否禁用文件上传 | Boolean | false |
| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
### FileItem
| 名称 | 说明 | 默认值 |
|----------|-------------------------------------------------|---------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
### Event
| 名称 | 说明 | 回调参数 |
|-----------------|------------------------|--------------------------------|
| start | 文件上传开始 | options |
| progress | 文件上传的进度 | {event,option,percentage} |
| oversize | 文件大小超过限制时触发 | files |
| success | 上传成功 | {responseText,option,fileItem} |
| failure | 上传失败 | {responseText,option,fileItem} |
| change | 上传文件改变时的状态 | {fileList,event} |
| delete | 文件删除之前的状态 | {files,fileList} |
| file-item-click | 文件上传成功后点击触发 | {fileItem} |
### Methods
通过 [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) 可以获取到 Uploader 实例并调用实例方法
| 方法名 | 说明 | 参数 | 返回值 |
|------------------|------------------------------------------------------------|------|--------|
| submit | 手动上传模式，执行上传操作 | - | - |
| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | - | - |