• 需求：打开资源管理器选择图片，并能够展示在页面
• 代码：

<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