9行代码实现图片上传和预览(自定义按钮上传)
结果展示:
- 默认展示
2.点击按钮后,选择图片文件
- 图片预览
首先我们定义一个type为file的input,并将它隐藏,绘制一个button,在按钮点击事件中触发input的点击事件。
<input
id="file-upload"
type="file"
accept="image/*"
name="picture"
style="display: none"
/>
<button @click="getFile">
上传头像
</button>
const getFile = () => {
document.getElementById('file-upload').click()
}
现在点击按钮,我们可以看到文件选择框了。
接下来在input上添加change事件,在event中取到file对象,实现预览和上传。
<input
...
@Change="preview"
/>
let imgUrl = ref('')
let imgFile = ref(null)
const preview = (e) => {
imgUrl.value = window.URL.createObjectURL(e.target.files[0])
imgFile = e.target.files[0]
}
window.URL.createObjectURL函数可以创建一个file文件的访问url,url用法和普通url相同,根据此url可以实现图片预览,我们可以将该url赋给img标签。
<img v-if="imgUrl" class="img" :src="imgUrl" alt="" />
而file文件可以提交给服务端储存。
下面给出我的完整代码。
<template>
<div class="flex">
<div class="img-bar">
<img v-if="imgUrl" class="img" :src="imgUrl" alt="" />
<div v-else class="flex img">
<i class="iconfont icon-drag icon-Quit" />
</div>
<input
id="file-upload"
class="file-upload img"
type="file"
accept="image/*"
name="picture"
style="display: none"
@Change="preview"
/>
</div>
<button class="btn-primary plain hand" @click="getFile">
<i class="iconfont icon-drag icon-Quit" />上传头像
</button>
</div>
</template>
<script lang="ts" setup>
let { imgUrl, imgFile, getFile, preview } = (() => {
let imgUrl = ref('')
let imgFile = ref(null)
const getFile = () => {
document.getElementById('file-upload').click()
}
const preview = (e) => {
imgUrl.value = window.URL.createObjectURL(e.target.files[0])
imgFile = e.target.files[0]
}
return { imgUrl, imgFile, getFile, preview }
})()
</script>
<style lang="scss" scoped>
...
</style>