vue移动端照片预览，裁剪 上传功能

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 判断进行 销毁 不然的话 弹出层数据不会更新