大家好，又见面了，我是你们的朋友全栈君。
- 需求：打开资源管理器选择图片，并能够展示在页面
- 代码：
<template>
<div>
<img :src="imageSrc" style="height:100px;width:100px;"> // 用于展示所选择的图片
<input type="file" v-on:change="test()" ref="fileInput"> // 选择文件
</div>
</template>
<script>
export default {
name:'Test',
data() {
return {
imageSrc:'' // 图片地址
}
},
methods:{
test:function() {
const file = this.$refs.fileInput.files[0]
const fileReader = new FileReader()
fileReader.onload = (temp) => {
this.imageSrc = temp.target.result
}
fileReader.readAsDataURL(file)
}
}
}
</script>
注：此处采用的是html原生组件获取文件，样式比较简单，可以使用element ui Upload组件更加美观 具体文件的上传可以使用OSS Bucket服务，详情参见https://blog.csdn.net/qq_18522163/article/details/122350544
Bald Monkey
2022年1月6日18点49分
2022年1月6日18点49分
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/150077.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
