Skip to content

Commit 1790dab

Browse files
tangjinzhoutangjinzhou
committed
docs: update upload demo #753 
1 parent a5bb191 commit 1790dab

16 files changed

+92
-82
lines changed

‎components/upload/__tests__/uploadlist.test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ describe('Upload List', () => {
9797
it('should be uploading when upload a file', done => {
9898
const props = {
9999
propsData: {
100-
action: 'http://jsonplaceholder.typicode.com/posts/',
100+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
101101
customRequest: successRequest,
102102
},
103103
listeners: {
@@ -133,7 +133,7 @@ describe('Upload List', () => {
133133
it('handle error', done => {
134134
const props = {
135135
propsData: {
136-
action: 'http://jsonplaceholder.typicode.com/posts/',
136+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
137137
customRequest: errorRequest,
138138
},
139139
listeners: {
@@ -166,7 +166,7 @@ describe('Upload List', () => {
166166
const handleChange = jest.fn();
167167
const props = {
168168
propsData: {
169-
action: 'http://jsonplaceholder.typicode.com/posts/',
169+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
170170
listType: 'picture',
171171
defaultFileList: fileList,
172172
beforeUpload: () => false,

‎components/upload/demo/avatar.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The return value of function `beforeUpload` can be a Promise to check asynchrono
1717
listType="picture-card"
1818
class="avatar-uploader"
1919
:showUploadList="false"
20-
action="//jsonplaceholder.typicode.com/posts/"
20+
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
2121
:beforeUpload="beforeUpload"
2222
@change="handleChange"
2323
>

‎components/upload/demo/basic.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Classic mode. File selection dialog pops up when upload button is clicked.
1010

1111
```html
1212
<template>
13-
<a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
13+
<a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :headers="headers" @change="handleChange">
1414
<a-button>
1515
<a-icon type="upload" /> Click to Upload
1616
</a-button>

‎components/upload/demo/defaultFileList.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Use `defaultFileList` for uploaded files when page init.
1010

1111
```html
1212
<template>
13-
<a-upload action="//jsonplaceholder.typicode.com/posts/" :defaultFileList="defaultFileList">
13+
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :defaultFileList="defaultFileList">
1414
<a-button>
1515
<a-icon type="upload" /> Upload
1616
</a-button>

‎components/upload/demo/directory.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ You can select and upload a whole directory.
1010

1111
```html
1212
<template>
13-
<a-upload action="//jsonplaceholder.typicode.com/posts/" directory>
13+
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
1414
<a-button>
1515
<a-icon type="upload" /> Upload Directory
1616
</a-button>

‎components/upload/demo/drag.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Classic mode. File selection dialog pops up when upload button is clicked.
1111

1212
```html
1313
<template>
14-
<a-upload-dragger name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" @change="handleChange">
14+
<a-upload-dragger name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
1515
<p class="ant-upload-drag-icon">
1616
<a-icon type="inbox" />
1717
</p>

‎components/upload/demo/fileList.md

+2-10
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom
1616

1717
```html
1818
<template>
19-
<a-upload action="//jsonplaceholder.typicode.com/posts/" :multiple="true" :fileList="fileList" @change="handleChange">
19+
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :fileList="fileList" @change="handleChange">
2020
<a-button>
2121
<a-icon type="upload" /> Upload
2222
</a-button>
@@ -36,7 +36,7 @@ export default {
3636
},
3737
methods: {
3838
handleChange(info) {
39-
let fileList = info.fileList;
39+
let fileList = [...info.fileList];
4040
4141
// 1. Limit the number of uploaded files
4242
// Only to show two recent uploaded files, and old ones will be replaced by the new
@@ -51,14 +51,6 @@ export default {
5151
return file;
5252
});
5353
54-
// 3. filter successfully uploaded files according to response from server
55-
fileList = fileList.filter((file) => {
56-
if (file.response) {
57-
return file.response.status === 'success';
58-
}
59-
return false;
60-
});
61-
6254
this.fileList = fileList
6355
},
6456
},

‎components/upload/demo/picture-card.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
1212
<template>
1313
<div class="clearfix">
1414
<a-upload
15-
action="//jsonplaceholder.typicode.com/posts/"
15+
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
1616
listType="picture-card"
1717
:fileList="fileList"
1818
@preview="handlePreview"

‎components/upload/demo/picture-style.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
1212
<template>
1313
<div>
1414
<a-upload
15-
action="//jsonplaceholder.typicode.com/posts/"
15+
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
1616
listType="picture"
1717
:defaultFileList="fileList"
1818
>
@@ -23,7 +23,7 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
2323
<br />
2424
<br />
2525
<a-upload
26-
action="//jsonplaceholder.typicode.com/posts/"
26+
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
2727
listType="picture"
2828
:defaultFileList="fileList"
2929
class="upload-list-inline"

‎components/upload/demo/upload-manually.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default {
6161
6262
// You can use any AJAX library you like
6363
reqwest({
64-
url: '//jsonplaceholder.typicode.com/posts/',
64+
url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
6565
method: 'post',
6666
processData: false,
6767
data: formData,

‎components/vc-upload/demo/asyncAction.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
action: () => {
88
return new Promise(resolve => {
99
setTimeout(() => {
10-
resolve('//jsonplaceholder.typicode.com/posts/');
10+
resolve('https://www.mocky.io/v2/5cc8019d300000980a055e76');
1111
}, 2000);
1212
});
1313
},
@@ -23,7 +23,9 @@ export default {
2323
console.log('error', err);
2424
},
2525
},
26-
style: { margin: '100px' },
26+
style: {
27+
margin: '100px',
28+
},
2729
};
2830
return (
2931
<Upload {...uploaderProps}>

‎components/vc-upload/demo/beforeUpload.jsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
render() {
55
const uploaderProps = {
66
props: {
7-
action: '//jsonplaceholder.typicode.com/posts/',
7+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
88
multiple: true,
99
beforeUpload(file, fileList) {
1010
console.log(file, fileList);
@@ -30,11 +30,9 @@ export default {
3030
},
3131
};
3232
return (
33-
<div
34-
style={{
35-
margin: '100px',
36-
}}
37-
>
33+
<div style={{
34+
margin: '100px',
35+
}}>
3836
<div>
3937
<Upload {...uploaderProps}>
4038
<a>开始上传</a>

‎components/vc-upload/demo/customRequest.js

+27-23
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ export default {
55
render() {
66
const uploaderProps = {
77
props: {
8-
action: '//jsonplaceholder.typicode.com/posts/',
8+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
99
multiple: false,
10-
data: { a: 1, b: 2 },
10+
data: {
11+
a: 1,
12+
b: 2,
13+
},
1114
headers: {
1215
Authorization: '$prefix $token',
1316
},
@@ -25,24 +28,25 @@ export default {
2528
// EXAMPLE: post form-data with 'axios'
2629
const formData = new FormData();
2730
if (data) {
28-
Object.keys(data).map(key => {
29-
formData.append(key, data[key]);
30-
});
31+
Object
32+
.keys(data)
33+
.map(key => {
34+
formData.append(key, data[key]);
35+
});
3136
}
3237
formData.append(filename, file);
3338

34-
axios
35-
.post(action, formData, {
36-
withCredentials,
37-
headers,
38-
onUploadProgress: ({ total, loaded }) => {
39-
onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
40-
},
41-
})
42-
.then(({ data: response }) => {
43-
onSuccess(response, file);
44-
})
45-
.catch(onError);
39+
axios.post(action, formData, {
40+
withCredentials,
41+
headers,
42+
onUploadProgress: ({total, loaded}) => {
43+
onProgress({
44+
percent: Math.round((loaded / total) * 100).toFixed(2),
45+
}, file);
46+
},
47+
}).then(({data: response}) => {
48+
onSuccess(response, file);
49+
}).catch(onError);
4650

4751
return {
4852
abort() {
@@ -61,17 +65,17 @@ export default {
6165
error(err) {
6266
console.log('error', err);
6367
},
64-
progress({ percent }, file) {
68+
progress({
69+
percent,
70+
}, file) {
6571
console.log('progress', `${percent}%`, file.name);
6672
},
6773
},
6874
};
6975
return (
70-
<div
71-
style={{
72-
margin: '100px',
73-
}}
74-
>
76+
<div style={{
77+
margin: '100px',
78+
}}>
7579
<div>
7680
<Upload {...uploaderProps}>
7781
<a>开始上传</a>

‎components/vc-upload/demo/directoryUpload.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ export default {
44
render() {
55
const uploaderProps = {
66
props: {
7-
action: '//jsonplaceholder.typicode.com/posts/',
8-
data: { a: 1, b: 2 },
7+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
8+
data: {
9+
a: 1,
10+
b: 2,
11+
},
912
headers: {
1013
Authorization: 'xxxxxxx',
1114
},
@@ -28,7 +31,9 @@ export default {
2831
console.log('error', err);
2932
},
3033
},
31-
style: { margin: '100px' },
34+
style: {
35+
margin: '100px',
36+
},
3237
};
3338
return (
3439
<Upload {...uploaderProps}>

‎components/vc-upload/demo/drag.jsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
render() {
55
const uploaderProps = {
66
props: {
7-
action: '//jsonplaceholder.typicode.com/posts/',
7+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
88
type: 'drag',
99
accept: '.png',
1010
beforeUpload(file) {
@@ -29,8 +29,13 @@ export default {
2929
alert('click');
3030
},
3131
},
32-
style: { display: 'inline-block', width: '200px', height: '200px', background: '#eee' },
32+
style: {
33+
display: 'inline-block',
34+
width: '200px',
35+
height: '200px',
36+
background: '#eee',
37+
},
3338
};
34-
return <Upload {...uploaderProps} />;
39+
return <Upload {...uploaderProps}/>;
3540
},
3641
};

‎components/vc-upload/demo/simple.jsx

+27-23
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ import Upload from '../index';
22

33
export default {
44
data() {
5-
return {
6-
destroyed: false,
7-
};
5+
return {destroyed: false};
86
},
9-
methods: {
7+
methods : {
108
destroy() {
119
this.destroyed = true;
1210
},
@@ -16,8 +14,11 @@ export default {
1614
return null;
1715
}
1816
const propsObj = {
19-
action: '//jsonplaceholder.typicode.com/posts/',
20-
data: { a: 1, b: 2 },
17+
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
18+
data: {
19+
a: 1,
20+
b: 2,
21+
},
2122
headers: {
2223
Authorization: 'xxxxxxx',
2324
},
@@ -63,14 +64,15 @@ export default {
6364
opacity:0.5;
6465
`;
6566
return (
66-
<div
67-
style={{
68-
margin: '100px',
69-
}}
70-
>
67+
<div style={{
68+
margin: '100px',
69+
}}>
7170
<h2>固定位置</h2>
7271

73-
<style>{style}</style>
72+
<style>
73+
{
74+
style
75+
}</style>
7476

7577
<div>
7678
<Upload {...uploaderProps}>
@@ -82,17 +84,19 @@ export default {
8284

8385
<div
8486
style={{
85-
height: '200px',
86-
overflow: 'auto',
87-
border: '1px solid red',
88-
}}
89-
>
90-
<div
91-
style={{
92-
height: '500px',
93-
}}
94-
>
95-
<Upload {...uploaderProps1} component="div" style={{ display: 'inline-block' }}>
87+
height: '200px',
88+
overflow: 'auto',
89+
border: '1px solid red',
90+
}}>
91+
<div style={{
92+
height: '500px',
93+
}}>
94+
<Upload
95+
{...uploaderProps1}
96+
component="div"
97+
style={{
98+
display: 'inline-block',
99+
}}>
96100
<a>开始上传2</a>
97101
</Upload>
98102
</div>

0 commit comments

Comments
 (0)