97 lines
2.6 KiB
Vue
97 lines
2.6 KiB
Vue
import PropTypes from '../../_util/vue-types';
|
|
import { initDefaultProps, getSlot } from '../../_util/props-util';
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
import AjaxUpload from './AjaxUploader';
|
|
import IframeUpload from './IframeUploader';
|
|
import { defineComponent, nextTick } from 'vue';
|
|
|
|
function empty() {}
|
|
|
|
const uploadProps = {
|
|
componentTag: PropTypes.string,
|
|
prefixCls: PropTypes.string,
|
|
action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
name: PropTypes.string,
|
|
multipart: PropTypes.looseBool,
|
|
directory: PropTypes.looseBool,
|
|
onError: PropTypes.func,
|
|
onSuccess: PropTypes.func,
|
|
onProgress: PropTypes.func,
|
|
onStart: PropTypes.func,
|
|
data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
|
headers: PropTypes.object,
|
|
accept: PropTypes.string,
|
|
multiple: PropTypes.looseBool,
|
|
disabled: PropTypes.looseBool,
|
|
beforeUpload: PropTypes.func,
|
|
customRequest: PropTypes.func,
|
|
onReady: PropTypes.func,
|
|
withCredentials: PropTypes.looseBool,
|
|
supportServerRender: PropTypes.looseBool,
|
|
openFileDialogOnClick: PropTypes.looseBool,
|
|
};
|
|
export default defineComponent({
|
|
name: 'Upload',
|
|
mixins: [BaseMixin],
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(uploadProps, {
|
|
componentTag: 'span',
|
|
prefixCls: 'rc-upload',
|
|
data: {},
|
|
headers: {},
|
|
name: 'file',
|
|
multipart: false,
|
|
onReady: empty,
|
|
onStart: empty,
|
|
onError: empty,
|
|
onSuccess: empty,
|
|
supportServerRender: false,
|
|
multiple: false,
|
|
beforeUpload: empty,
|
|
withCredentials: false,
|
|
openFileDialogOnClick: true,
|
|
}),
|
|
data() {
|
|
this.Component = null;
|
|
return {
|
|
// Component: null, // 组件作为响应式数据，性能比较低，采用强制刷新
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
if (this.supportServerRender) {
|
|
this.Component = this.getComponent();
|
|
this.$forceUpdate();
|
|
nextTick(() => {
|
|
this.__emit('ready');
|
|
});
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
getComponent() {
|
|
return typeof File !== 'undefined' ? AjaxUpload : IframeUpload;
|
|
},
|
|
abort(file) {
|
|
this.$refs.uploaderRef.abort(file);
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const componentProps = {
|
|
...this.$props,
|
|
ref: 'uploaderRef',
|
|
...this.$attrs,
|
|
};
|
|
if (this.supportServerRender) {
|
|
const ComponentUploader = this.Component;
|
|
if (ComponentUploader) {
|
|
return <ComponentUploader {...componentProps}>{getSlot(this)}</ComponentUploader>;
|
|
}
|
|
return null;
|
|
}
|
|
const ComponentUploader = this.getComponent();
|
|
return <ComponentUploader {...componentProps}>{getSlot(this)}</ComponentUploader>;
|
|
},
|
|
});
|