移动端项目上传本地图片(cropper的用法)

场景: 项目中需要上传本地文件(图片、视频等)

html提供了input标签可以上传文件
< input type="file" />
//这样页面中就会生成按钮，点击可以上传文件
//但是一般不这样使用，因为原生的按钮不美观

给input标签添加hideen属性，那么input标签就会隐藏起来

 <input type="file" hidden ref="file" @change="onFileChange" />

change事件，在选择本地文件并且确认的时候就会触发，但他不是每次都会触发，如果两次选择的文件是同一个时，那么第二次就不会触发，下面讲解解决的方法

有这样一个场景，点击更换头像，那么就可以通过点击更换头像的按钮来触发已经隐藏的input框

 //点击头像
    onChangePhoto() {
   
      //因为input框已经隐藏了，通过点击其他的框来触发原来的input的的点击事件
      this.$refs.file.click();
    },

当选择好本地的文件按确认时就会触发input的change事件

 //@change这个事件什么时候触发?pc端为例: 在选择了电脑文件并点击确认后触发
    onFileChange() {
   
      /*
      this.$refs.file.files[0] 
      获取到的是一个复杂对象，里面包含图片的大小，图片的类型，当前的时间
       console.log(1111, this.$refs.file.files[0]);
      */
      /* 
      进过window.URL.createObjectURL会获得一个http格式的url路径
     */
      this.img = window.URL.createObjectURL(this.$refs.file.files[0]);

      //展示弹出层
      this.userPhotoShow = true;
      //当第二次选择同一个文件时，@change函数就会不被触发，我们可以令this.$refs.file的value等于空
      this.$refs.file.value = ""