用户在使用选择文件，选择了一个图像文件以后，我想在界面上显示一个预览图像。可以使用一个叫 FileReader 的 Web 接口。它可以读取文件内容，我们可以使用 FileReader 把用户选择的文件内容读取成 base64 格式的数据，然后把这个数据的值作为一个图像标签的 src 属性的值，这样就可以显示这个图像了。

在项目的 App 组件里面，先在这个组件的数据里添加一个 imagePreviewUrl，默认让它等于 null 。 然后在这个组件的模板里，找个地方，先添加一组 div 元素，元素上面用 v-if 判断一下，imagePreviewUrl。

里面包装一个图像元素，在它上面可以加上一个类，名字是 image-preview，然后绑定 src 属性的值，等于组件里的 imagePreviewUrl 这个数据。

打开这个组件导入使用的样式表，在这个样式表里设计一下 image-preview 这个类的样式，用 max-width 属性设置一下元素最大的宽度，设置成 360 像素。

再回到 App 组件，在组件里面可以再添加一个方法，放在 methods 里面，方法的名字叫 createImagePreview，方法接收一个 file 参数。 在方法里声明一个 reader ，它的值可以新建一个 FileReader，文件读取器。

下面用一下创建的这个 reader 上面的一个读取方法，这里我们要用的是 readAsDataURL， 把要读取的图像文件交给这个方法，这里就是这个方法接收的 file 这个参数。

然后可以设置一下这个 reader 的 onload ，读取器成功操作以后都会执行这个方法，方法接收一个 event 参数，在这个方法里可以设置一下组件的 imagePreviewUrl 这个数据的值，让它等于 event.target.result，也就是读取的结果。

再找个地方用一下我们定义的这个方法，比如在这个 onChangeFile 方法里，用户如果选择了文件以后，这里可以用一下组件里的 createImagePreview，把用户选择的文件交给这个方法。

在浏览器上测试一下，选择文件，选择一张图像，执行了组件的 onChangeFile 方法，如果选择了文件，就会调用 createImagePreview，在这个方法里会创建一个文件读取器，读取用户选择的图像文件，格式是 base64。

读取的图像数据会作为我们的一个图像标签的 src 属性的值，所以在这里你会看到这张图像。