用户选择了图像文件以后，可以在界面上显示一个预览图。我们可以创建一个 FileReader 来读取用户选择的图像文件，然后显示读取的图像文件。

在这个创建内容页面组件的脚本里面，先声明一个表示图像预览地址的数据，名字是 imagePreviewUrl，用一下 ref，数据的类型是 string。

再准备一个创建图像预览用的方法，声明一个 createImagePreview，它有个 file 参数，类型是 File。在这个函数里面创建一个文件阅读器，声明一个 reader，它的值可以新建一个 FileReader。下面用一下 reader.readAsDataURL 这个方法，把 file 交给这个方法。

然后设置一下 reader.onload ，它是一个函数，有个 event 参数。函数里面设置一下 imagePreviewUrl.value 的值，让它等于 event.target.result 断言它的类型是 string。

在找到上面这个 onChangeFile 方法，这里可以判断一下，如果 file.value 有值，可以执行一下 createImagePreview 把 file.value 交给这个方法。

模板

在组件的模板里面，添加一组 div，上面用 v-if 判断一下 imagePreviewUrl，如果有预览图像的地址，可以使用一个图像元素，用 style 设置一下它的样式，把 max-width 设置成 380像素。再绑定元素的 src 属性，值可以设置成 imagePreviewUrl。

测试

在浏览器测试一下，点击选择图像文件，选择电脑上的一个图像文件，点击打开。文件字段发生 change 事件以后，如果用户选择了图像文件，就会执行 createImagePreview 创建一个预览图像，在界面上会显示这个预览图像。