logo

该视频仅会员有权观看

立即开通课程「Nuxt.js 前端应用开发实践」权限。

¥
199
/ 年

在 Nuxt 应用里选择图像后显示预览图像

用户选择图像文件后,可以通过创建一个FileReader对象来读取该文件。脚本中定义一个字符串类型的数据'image preview'来存储图像预览的地址。使用方法'create image preview',接收File类型参数来创建图像预览。当文件选中变化时(onchange事件),若有文件值,则调用'create image preview'生成预览图。在组件模板中,使用条件渲染(v-if)来判断是否显示图像,并绑定图像地址到src属性。最大宽度设置为380像素。用户选择文件后,会在界面上显示所选图像的预览。