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

SpaceX7_s

已于 2022-05-29 17:14:46 修改

阅读量447

点赞数

文章标签： javascript 前端 html5

于 2022-05-14 20:08:02 首次发布

本文链接：https://blog.csdn.net/weixin_45842954/article/details/124772700

版权

本文介绍了在移动端项目中如何实现本地文件上传，特别是图片的上传和裁剪。使用了cropperjs库进行图片裁剪，详细阐述了input标签的选择文件机制，以及在change事件中的处理。此外，还讲解了不同Content-Type在文件上传接口中的应用，包括multipart/form-data类型的文件上传和application/json类型的接口请求。

摘要由CSDN通过智能技术生成

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

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 = ""