用户登录

用户在使用选择文件,选择了一个图像文件以后,我想在界面上显示一个预览图像。可以使用一个叫 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 属性的值,所以在这里你会看到这张图像。

使用 FileReader 生成预览图像《 Vue.js 前端应用 #11:上传文件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点