【上传图片】Vue上传图片并回显

问题：用户点击上传图片之后，怎么将图片显示到页面？

注意事项：

• 用于回显的图片src属性需要绑定为图片的URL地址，即imageUrl ，this.imageUrl = URL.createObjectURL(this.selectedFile)。
• 绑定@change事件，来监听用户上传图片的行为。
• 保存图片文件信息selectedFile，需要用到event事件对象，即this.selectedFile = event.target.files[0]。

示例代码：

把以下示例代码看懂，以后遇到文件上传的问题就都会了，代码中有对应的注解，这个问题不难，一定要看懂！！！

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="uploadImage">上传图片</button>
    <img :src="imageUrl" v-if="imageUrl" style="max-width: 300px;">
  </div>
</template>

<script>
export default {
	data() {
      return {
        selectedFile: null,  // 是一个file类型的文件对象，用于保存图片文件的信息，发送到后端
        imageUrl: null       // 是图片的URL地址，用于回显图片
      };
    },
    methods: {
    	// 用户点击上传图片后，保存图片文件的信息和URL地址
		handleFileChange(event) {
	        this.selectedFile = event.target.files[0];
	        this.imageUrl = URL.createObjectURL(this.selectedFile);
      	},
      	// 将数据提交到后台
      	uploadImage() {
			const formData = new FormData();
			formData.append('image', this.selectedFile);  // 向后端请求的数据是file对象
			// 向后端发送请求
			fetch('/upload', {
	          method: 'POST',
	          body: formData
	        }).then(()=>{});
		}
	}
}
</script>

如果这篇博客对您有帮助，请点赞加关注吧，谢谢！欢迎评论留言！