vue移动端照片预览,裁剪 上传功能:
1.先写一个 file 类型的 input 的 然后 给 input 一个 属性然后进行隐藏 给input 设置 ref 属性
2.给 van-call 单元格一个点击事件 用 $refs来触发 input 的点击事件
3.监听input 的chang事件 获取文件对像 (照片数据) 用 this.$refs.‘自定义名字’.files[0]
4.基于文章对象获取 blob 数据
window.URL.createObjectURL
可以用于在浏览器上预览本地图片或者视频
5。创建弹出层 高度100%
6.创建子组件封装预览的照片用于显示 用组件传值 把获取的照片信息传递给组件在组件中用 img 显示
7.在选择同一个照片 input 的chang事件 就不会触发 解决办法把input的value给清空
裁剪功能:
下载插件裁剪的插件网址
1.先用 import 引入 js 文件 和 css文件
2. 将你的 img 包裹到块级元素里面 然后给 img 一个最大 高度 然后给个块级元素
3。mounted 生命周期中操作DOM 用this.$refs.‘自定义名字’.img
4.移动端配置 具体看文档
5.有两种方法一个时基于服务端 一个基于 纯客户端
基于客户端
看接口文档的要求根据要求传递不同的格式
下一步用 emit 自定义事件传递给父组件关闭弹出层 然后在传递data中的照片数据
弹出层不会自动销毁 需要v-if 判断进行 销毁 不然的话 弹出层数据不会更新