docs: update upload doc

pull/398/head
tangjinzhou 2019-01-07 20:59:57 +08:00
parent cfe002191b
commit 7a279f6651
4 changed files with 112 additions and 5 deletions

View File

@ -1,6 +1,6 @@
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import Upload from '..' import Upload from '..'
import { fileToObject } from '../utils' import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from '../utils'
import PropsTypes from '../../_util/vue-types' import PropsTypes from '../../_util/vue-types'
import { UploadListProps } from '../interface' import { UploadListProps } from '../interface'
@ -58,6 +58,47 @@ describe('Upload', () => {
}, 0) }, 0)
}) })
it('upload promise return file in beforeUpload', done => {
const data = jest.fn()
const props = {
propsData: {
action: 'http://upload.com',
beforeUpload: file =>
new Promise(resolve =>
setTimeout(() => {
const result = file
result.name = 'test.png'
resolve(result)
}, 100),
),
data,
},
listeners: {
change: ({ file }) => {
if (file.status !== 'uploading') {
expect(data).toBeCalled()
expect(file.name).toEqual('test.png')
done()
}
},
},
slots: {
default: '<button>upload</button>',
},
sync: false,
}
const wrapper = mount(Upload, props)
setTimeout(() => {
wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
target: {
files: [{ file: 'foo.png' }],
},
})
}, 0)
})
it('should not stop upload when return value of beforeUpload is false', (done) => { it('should not stop upload when return value of beforeUpload is false', (done) => {
const data = jest.fn() const data = jest.fn()
const props = { const props = {
@ -165,6 +206,11 @@ describe('Upload', () => {
}) })
describe('util', () => { describe('util', () => {
// https://github.com/react-component/upload/issues/36
it('should T() return true', () => {
const res = T()
expect(res).toBe(true)
})
it('should be able to copy file instance', () => { it('should be able to copy file instance', () => {
const file = new File([], 'aaa.zip') const file = new File([], 'aaa.zip')
const copiedFile = fileToObject(file); const copiedFile = fileToObject(file);
@ -172,6 +218,67 @@ describe('Upload', () => {
expect(key in copiedFile).toBe(true) expect(key in copiedFile).toBe(true)
}) })
}) })
it('should be able to progress from 0.1 ', () => {
// 0.1 -> 0.98
const getPercent = genPercentAdd()
let curPercent = 0
curPercent = getPercent(curPercent)
expect(curPercent).toBe(0.1)
})
it('should be able to progress to 0.98 ', () => {
// 0.1 -> 0.98
const getPercent = genPercentAdd()
let curPercent = 0
for (let i = 0; i < 500; i += 1) {
curPercent = getPercent(curPercent)
}
expect(parseFloat(curPercent.toFixed(2))).toBe(0.98)
})
it('should be able to get fileItem', () => {
const file = { uid: '-1', name: 'item.jpg' }
const fileList = [
{
uid: '-1',
name: 'item.jpg',
},
]
const targetItem = getFileItem(file, fileList)
expect(targetItem).toBe(fileList[0])
})
it('should be able to remove fileItem', () => {
const file = { uid: '-1', name: 'item.jpg' }
const fileList = [
{
uid: '-1',
name: 'item.jpg',
},
{
uid: '-2',
name: 'item2.jpg',
},
]
const targetItem = removeFileItem(file, fileList)
expect(targetItem).toEqual(fileList.slice(1))
})
it('should not be able to remove fileItem', () => {
const file = { uid: '-3', name: 'item.jpg' }
const fileList = [
{
uid: '-1',
name: 'item.jpg',
},
{
uid: '-2',
name: 'item2.jpg',
},
]
const targetItem = removeFileItem(file, fileList)
expect(targetItem).toBe(null)
})
}) })
it('should support linkProps as object', () => { it('should support linkProps as object', () => {

View File

@ -56,7 +56,7 @@ export default {
if (file.response) { if (file.response) {
return file.response.status === 'success'; return file.response.status === 'success';
} }
return true; return false;
}); });
this.fileList = fileList this.fileList = fileList

View File

@ -4,7 +4,7 @@
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | - | | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |
| action | Uploading URL | string\|(file) => `Promise` | - | | action | Uploading URL | string\|(file) => `Promise` | - |
| directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | | directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warningthis function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - | | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warningthis function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - |

View File

@ -4,10 +4,10 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | 无 | | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 |
| action | 上传的地址 | string\|(file) => `Promise` | 无 | | action | 上传的地址 | string\|(file) => `Promise` | 无 |
| directory | 支持上传文件夹([caniuse](https://caniuse.com/#feat=input-file-directory)| boolean | false | | directory | 支持上传文件夹([caniuse](https://caniuse.com/#feat=input-file-directory)| boolean | false |
| beforeUpload | 上传文件之前的钩子,参数为上传的文件,若返回 `false` 则停止上传。支持返回一个 Promise 对象Promise 对象 reject 时则停止上传resolve 时开始上传。**注意IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 | | beforeUpload | 上传文件之前的钩子,参数为上传的文件,若返回 `false` 则停止上传。支持返回一个 Promise 对象Promise 对象 reject 时则停止上传resolve 时开始上传 resolve 传入 `File``Blob` 对象则上传 resolve 传入对象)。**注意IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 |
| customRequest | 通过覆盖默认的上传行为,可以自定义自己的上传实现 | Function | 无 | | customRequest | 通过覆盖默认的上传行为,可以自定义自己的上传实现 | Function | 无 |
| data | 上传所需参数或返回上传参数的方法 | object\|(file) => object | 无 | | data | 上传所需参数或返回上传参数的方法 | object\|(file) => object | 无 |
| defaultFileList | 默认已经上传的文件列表 | object\[] | 无 | | defaultFileList | 默认已经上传的文件列表 | object\[] | 无 |