2019-01-12 03:33:27 +00:00
|
|
|
import Upload from '../index';
|
2018-04-12 06:37:22 +00:00
|
|
|
|
|
|
|
export default {
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
2018-04-12 06:37:22 +00:00
|
|
|
return {
|
|
|
|
destroyed: false,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
destroy() {
|
|
|
|
this.destroyed = true;
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2018-04-12 06:37:22 +00:00
|
|
|
if (this.destroyed) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return null;
|
2018-04-12 06:37:22 +00:00
|
|
|
}
|
|
|
|
const propsObj = {
|
2018-09-05 13:28:54 +00:00
|
|
|
action: '//jsonplaceholder.typicode.com/posts/',
|
2018-04-12 06:37:22 +00:00
|
|
|
data: { a: 1, b: 2 },
|
|
|
|
headers: {
|
|
|
|
Authorization: 'xxxxxxx',
|
|
|
|
},
|
|
|
|
multiple: true,
|
2019-01-12 03:33:27 +00:00
|
|
|
beforeUpload(file) {
|
|
|
|
console.log('beforeUpload', file.name);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-12 06:37:22 +00:00
|
|
|
const propsEvent = {
|
2019-01-12 03:33:27 +00:00
|
|
|
start(file) {
|
|
|
|
console.log('start', file, file.name);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
success(file) {
|
|
|
|
console.log('success', file);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
progress(step, file) {
|
|
|
|
console.log('progress', Math.round(step.percent), file.name);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
error(err) {
|
|
|
|
console.log('error', err);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-12 06:37:22 +00:00
|
|
|
const uploaderProps = {
|
|
|
|
props: {
|
|
|
|
...propsObj,
|
|
|
|
},
|
|
|
|
on: {
|
|
|
|
...propsEvent,
|
|
|
|
},
|
|
|
|
ref: 'inner',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-12 06:37:22 +00:00
|
|
|
const uploaderProps1 = {
|
|
|
|
props: {
|
|
|
|
...propsObj,
|
|
|
|
componentTag: 'div',
|
|
|
|
},
|
|
|
|
on: {
|
|
|
|
...propsEvent,
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-12 06:37:22 +00:00
|
|
|
const style = `
|
|
|
|
.rc-upload-disabled {
|
|
|
|
opacity:0.5;
|
2019-01-12 03:33:27 +00:00
|
|
|
`;
|
2018-04-12 06:37:22 +00:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
margin: '100px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<h2>固定位置</h2>
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
<style>{style}</style>
|
2018-04-12 06:37:22 +00:00
|
|
|
|
|
|
|
<div>
|
2019-01-12 03:33:27 +00:00
|
|
|
<Upload {...uploaderProps}>
|
|
|
|
<a>开始上传</a>
|
|
|
|
</Upload>
|
2018-04-12 06:37:22 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<h2>滚动</h2>
|
|
|
|
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
height: '200px',
|
|
|
|
overflow: 'auto',
|
|
|
|
border: '1px solid red',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
height: '500px',
|
|
|
|
}}
|
|
|
|
>
|
2019-01-12 03:33:27 +00:00
|
|
|
<Upload {...uploaderProps1} component="div" style={{ display: 'inline-block' }}>
|
2018-09-05 13:28:54 +00:00
|
|
|
<a>开始上传2</a>
|
|
|
|
</Upload>
|
2018-04-12 06:37:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<button onClick={this.destroy}>destroy</button>
|
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-04-12 06:37:22 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|