来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

vue使用readAsDataURL实现选择图片文件后预览

时间: 2019-09-04阅读: 221标签: 图片

如果在h5上想要实现类似app上的点击预览图片并且可以放大缩小这种功能,确实比在app上实现起来更为麻烦,但是有了PhotoSwipe(https://github.com/dimsemenov/PhotoSwipe)这个三方库,实现起来就要方便简单的多了。

利用h5的api可以实现选择文件并实现预览

我在的前端项目使用的是vue-cli搭建的框架,所以在使用PhotoSwipe的时候,只需要NPM或者CNPM管理就可以了:

readAsDataURL

 npm install photoswipe

方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容

当在项目中安装了photoswipe之后,只需要在对应的.vue文件中引入即可进行使用:

方式引入vue文件

import PhotoSwipe from 'photoswipe/dist/photoswipe'
import UI from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
script src="./vue.js"/script

当然,这个时候,只是把photoswipe引入了template里面,还没有开始正式使用,接下来,只需要在项目的<template></template>标签的唯一子标签<div></div>中引入如下代码即可:

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:vue使用readAsDataURL实现选择图片文件后预览

关键词: