mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Uploader: optimize template
This commit is contained in:
parent
99259a863f
commit
ac4b739814
@ -1,57 +1,54 @@
|
||||
<template>
|
||||
<div class="van-uploader">
|
||||
<slot></slot>
|
||||
<template v-if="disabled">
|
||||
<input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<input type="file" @change="onValueChange" class="van-uploader__input" ref="input" />
|
||||
</template>
|
||||
<input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-uploader',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beforeRead: Function,
|
||||
afterRead: Function,
|
||||
resultType: {
|
||||
type: String,
|
||||
default: 'dataUrl',
|
||||
validator(value) {
|
||||
return value === 'dataUrl' || value === 'text';
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'van-uploader',
|
||||
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
methods: {
|
||||
onValueChange(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
var files = event.target.files;
|
||||
var file = files[0];
|
||||
if (!file) return;
|
||||
if (this.beforeRead && !this.beforeRead(file)) return;
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.afterRead && this.afterRead(
|
||||
{
|
||||
file: file,
|
||||
content: e.target.result
|
||||
});
|
||||
this.$refs.input && (this.$refs.input.value = '');
|
||||
};
|
||||
if (this.resultType === 'dataUrl') {
|
||||
reader.readAsDataURL(file);
|
||||
} else if (this.resultType === 'text') {
|
||||
reader.readAsText(file);
|
||||
}
|
||||
beforeRead: Function,
|
||||
afterRead: Function,
|
||||
resultType: {
|
||||
type: String,
|
||||
default: 'dataUrl',
|
||||
validator: value => value === 'dataUrl' || value === 'text'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onValueChange(event) {
|
||||
if (this.disable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const file = event.target.files[0];
|
||||
if (!file || (this.beforeRead && !this.beforeRead(file))) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.afterRead && this.afterRead({
|
||||
file,
|
||||
content: e.target.result
|
||||
});
|
||||
this.$refs.input && (this.$refs.input.value = '');
|
||||
};
|
||||
|
||||
if (this.resultType === 'dataUrl') {
|
||||
reader.readAsDataURL(file);
|
||||
} else if (this.resultType === 'text') {
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user