vue实现选中文件
文件选择基础实现
使用HTML的<input type="file">元素结合Vue实现基础文件选择功能：
<template>
<div>
<input type="file" @change="handleFileChange" />
<p v-if="selectedFile">已选择文件: {{ selectedFile.name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
}
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
}
}
}
</script>自定义样式文件选择按钮
通过隐藏原生input元素并自定义触发按钮来改善UI：
<template>
<div>
<input
type="file"
ref="fileInput"
@change="handleFileChange"
style="display: none"
/>
<button @click="$refs.fileInput.click()">选择文件</button>
<div v-if="selectedFile">
<span>{{ selectedFile.name }}</span>
<button @click="removeFile">移除</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
}
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
},
removeFile() {
this.selectedFile = null
this.$refs.fileInput.value = ''
}
}
}
</script>多文件选择支持
添加multiple属性实现多文件选择：
<template>
<div>
<input
type="file"
multiple
@change="handleFilesChange"
/>
<ul v-if="selectedFiles.length">
<li v-for="(file, index) in selectedFiles" :key="index">
{{ file.name }} ({{ formatSize(file.size) }})
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
selectedFiles: []
}
},
methods: {
handleFilesChange(event) {
this.selectedFiles = Array.from(event.target.files)
},
formatSize(bytes) {
if (bytes === 0) return '0 Bytes'
const k = 1024
const sizes = ['Bytes', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
}
}
</script>文件类型限制
通过accept属性限制可选择的文件类型：
<input
type="file"
accept=".jpg,.jpeg,.png,.pdf"
@change="handleFileChange"
>拖放文件选择实现
添加拖放区域实现拖放文件选择功能：
<template>
<div
@dragover.prevent="dragover = true"
@dragleave="dragover = false"
@drop.prevent="handleDrop"
:class="{ 'drag-active': dragover }"
class="drop-area"
>
<p>拖放文件到这里或点击选择文件</p>
<input
type="file"
ref="fileInput"
@change="handleFileChange"
/>
<div v-if="selectedFile">
{{ selectedFile.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
dragover: false,
selectedFile: null
}
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
},
handleDrop(event) {
this.dragover = false
this.selectedFile = event.dataTransfer.files[0]
}
}
}
</script>
<style>
.drop-area {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
.drag-active {
border-color: #42b983;
background-color: rgba(66, 185, 131, 0.1);
}
</style>文件预览功能
实现图片文件的预览功能：
<template>
<div>
<input type="file" accept="image/*" @change="previewImage" />
<img v-if="imageUrl" :src="imageUrl" width="200" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null
}
},
methods: {
previewImage(event) {
const file = event.target.files[0]
if (file && file.type.match('image.*')) {
const reader = new FileReader()
reader.onload = (e) => {
this.imageUrl = e.target.result
}
reader.readAsDataURL(file)
}
}
}
}
</script>
