Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

提交 08f28a5c 编写于 作者: S suzigang
浏览文件
操作

docs: uploader

上级 31353496
隐藏空白更改
内联 并排
Showing with 94 addition and 32 deletion
src/packages/uploader/demo.vue
浏览文件 @ 08f28a5c
<template>
<div class="demo bg-w">
<h2>基础用法</h2>
<nut-uploader :url="uploadUrl"></nut-uploader>
<nut-uploader :url="uploadUrl" @start="start"></nut-uploader>
<h2>上传状态</h2>
<nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader>
<h2>限制上传数量5个</h2>
......@@ -13,6 +13,14 @@
:max-size="1024 * 50"
@oversize="onOversize"
></nut-uploader>
<h2>限制上传大小（在beforeupload钩子中处理）</h2>
<nut-uploader
:url="uploadUrl"
multiple
:before-upload="beforeUpload"
:max-size="1024 * 50"
@oversize="onOversize"
></nut-uploader>
<h2>自定义数据 FormData 、 headers </h2>
<nut-uploader
:url="uploadUrl"
......@@ -33,18 +41,56 @@ export default createDemo({
setup() {
const uploadUrl =
'https://my-json-server.typicode.com/linrufeng/demo/posts';
const formData = {
custom: 'test'
};
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 触发 文件大小不能超过 50kb', files);
};
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log('delete 事件触发', file, fileList);
};
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];
};
return {
onOversize,
beforeUpload,
onDelete,
uploadUrl,
formData
......
src/packages/uploader/doc.md
浏览文件 @ 08f28a5c
......@@ -27,10 +27,10 @@ app.use(Uploader);
``` html
<nut-uploader url="http://服务器地址" multiple max-count="5"></nut-uploader>
```
### 限制上传大小（每个文件最大不超过 50kb）
### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）
``` html
<nut-uploader url="http://服务器地址" multiple :max-size="1024 * 50" @oversize="onOversize"></nut-uploader>
<nut-uploader url="http://服务器地址" multiple :max-size="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>
```
``` javascript
......@@ -41,6 +41,11 @@ setup() {
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files);
};
const beforeUpload = (files: File[]) => {
//自定义处理
return files;
}
return {
onOversize,
......@@ -85,36 +90,47 @@ setup() {
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|-------------|
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| default-file-list | 默认已经上传的文件列表 | object[] | - |
| file-list | 默认已经上传的文件列表 | object[] | - |
| custom-request | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | - |
| file-list | 默认已经上传的文件列表 | FileItem[] | [] |
| is-preview | 是否上传成功后展示预览图 | Boolean | true |
| is-deletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，可选值为 camera (直接调起摄像头) | String | "camera" |
| max-size | 可以设定最大上传文件的大小（字节） | Number丨String | - |
| max-size | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| max-count | 文件上传数量限制 | Number丨String | 1 |
| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | false |
| accept-type | 允许上传的文件类型，[详细说明](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 | {} |
| form-data | 附加上传的信息 formData | Object | {} |
| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | photograph |
| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| xhr-state | 接口响应的成功状态（status）值 | Number | 200 |
| with-credentials | 支持发送 cookie 凭证信息 | Boolean | fasle |
| multiple | 是否支持文件多选 | Boolean | fasle |
| disabled | 是否禁用文件上传 | Boolean | fasle |
| before-upload | 上传前的函数需要返回一个对象 | Function | input files |
| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| change | 上传文件改变时的状态，详见 | Function(fileList) 丨 Promise | - |
| custom-request | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | - |
| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
### FileItem
| 名称 | 说明 | 默认值 |
|----------|------------------------|----------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
### Event
| 名称 | 说明 | 回调参数 |
|----------|------------------------|----------------------------------|
| start | 文件上传开始 | - |
| progress | 文件上传的进度 | 上传文件、已上传数据量、总数据量 |
| start | 文件上传开始 | options |
| progress | 文件上传的进度 | event，options |
| oversize | 文件大小超过限制时触发 | files |
| success | 上传成功 | fileList |
| failure | 上传失败 | fileList |
| success | 上传成功 | responseText，options |
| failure | 上传失败 | responseText，options |
| change | 上传文件改变时的状态 | fileList，event |
| delete | 文件删除之前的状态 | files，fileList |
src/packages/uploader/index.vue
浏览文件 @ 08f28a5c
......@@ -53,12 +53,12 @@ export default create({
props: {
name: { type: String, default: 'file' },
url: { type: String, default: '' },
defaultFileList: { type: Array, default: () => new Array<FileItem>() },
// defaultFileList: { type: Array, default: () => new Array<FileItem>() },
fileList: { type: Array, default: () => [] },
isPreview: { type: Boolean, default: true },
isDeletable: { type: Boolean, default: true },
method: { type: String, default: 'post' },
capture: { type: String, default: '' },
capture: { type: String, default: 'camera' },
maxSize: { type: [Number, String], default: Number.MAX_VALUE },
maxCount: { type: [Number, String], default: 1 },
clearInput: { type: Boolean, default: false },
......@@ -72,9 +72,7 @@ export default create({
disabled: { type: Boolean, default: false },
beforeUpload: {
type: Function,
default: (files: FileList) => {
return files;
}
default: null
},
beforeDelete: {
type: Function,
......@@ -82,8 +80,8 @@ export default create({
return true;
}
},
onChange: { type: Function },
customRequest: { type: Function }
onChange: { type: Function }
// customRequest: { type: Function }
},
emits: [
'start',
......@@ -217,18 +215,20 @@ export default create({
const $el = event.target as HTMLInputElement;
let { files } = $el;
if (props.beforeUpload) {
files = props.beforeUpload(files);
}
const _files: File[] = filterFiles(new Array<File>().slice.call(files));
readFile(_files);
if (props.clearInput) {
clearInput($el);
}
if (props.beforeUpload) {
props.beforeUpload(files).then((f: Array<File>) => {
const _files: File[] = filterFiles(new Array<File>().slice.call(f));
readFile(_files);
});
} else {
const _files: File[] = filterFiles(new Array<File>().slice.call(files));
readFile(_files);
}
emit('change', {
fileList,
event
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或