vue 图片裁剪上传组件的实现


Posted in Javascript onNovember 12, 2020

先看一下总体效果:

上传文件做了大小和类型的限制,在动图中无法展现出来。

vue 图片裁剪上传组件的实现

使用file类型的input实现选择本地文件

但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下。

  • 方法1:使用label元素来触发一个隐藏的file类型的 input元素;(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug)
<input type="file" id='up_file_input' v-show='false' >
<label for='up_file_input'></label>
  • 方法2:或者在这个label元素的click事件函数中手动触发文件上传按钮的click事件。
<input type="file" v-show='false' ref="inputFileUp" >
<label @click='$refs.inputFileUp.click()'></label>

使用input的change事件获取选择的本地图片并进行校验

上传图片的校验规则及提示语由父组件通过 prop 传递给子组件,格式如下:

const img_valit = {
 type: /^.*\.(jpg|png|jpeg)$/i, // 文件格式校验
 type_error_msg: '上传头像图片只能是 jpg 或者 png 格式!',
 size: 3, // 文件大小校验
 size_error_msg: '上传的图片大小不能超过3MB'
}

这里需要注意: 需要在上传文件按钮的click事件中手动清空这个文件类型输入框的值,解决选择和上次相同的文件之后无法触发 change事件的问题

function fileInputClick(event) {
  event.target.value = "";
}
function coverImgChange(event) {
   const file = event.target.files[0];
   // 在组件的自定义属性中定义一个变量 originalFile 来保存当前上传的文件
   this.$options._myOpt.originalFile = file;
   // 获取对文件的校验规则
   const { type, size, type_error_msg, size_error_msg } = this.img_valit;
   // 校验文件类型和文件大小
   const isJPG_PNG = type.test(file.name), isLt5M = file.size / 1024 / 1024 <= size;
   !isLt5M && this.$message.error(size_error_msg);
   !isJPG_PNG && this.$message.error(type_error_msg);
   // 文件通过校验,打开裁剪弹窗
   if (isJPG_PNG && isLt5M) {
    this.cropImgUrl = window.URL.createObjectURL(file);
    this.dialogVisible = true;
   }
  }

打开弹窗进行图片裁剪

弹窗使用的 Element-UI 中的弹窗, 图片裁剪是第三方插件 vue-cropper。图片裁剪插件中的一些配置可以参考插件官方文档,下面的代码中省略了配置部分的代码。

<el-dialog :visible.sync="dialogVisible" width='800px' title="图片裁剪">
   <div class="dialog-content">
    <div class="cropper-image">
     <vue-cropper
      ref="cropper"
      :img="cropImgUrl"
      @realTime="realTime"
     ></vue-cropper>
    </div>
    <!-- 图片裁剪之后的预览 -->
    <div class="preview-wrapper">
     <div
      class="show-preview"
      :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}"
     >
      <div :style="previews.div">
       <img :src="previews.url" class="preview_img" :style="[previews.img]">
      </div>
     </div>
     <p class="preview-text">裁剪结果预览</p>
    </div>
   </div>
   <div slot="footer" class="dialog-footer">
    <button @click="dialogEsc()">取 消</button>
    <button @click="dialogSure()">确 定</button>
   </div>
  </el-dialog>

向服务器发送请求上传图片

上传文件接口中,向后台发送请求的参数为 {image: 文件本身(File类型), filename: 文件名}

function realTime(data) {
  this.previews = data;
}
// 裁剪弹窗中确定按钮的点击事件
function dialogSure() {
   const ajaxConfig = {
    headers: {
     "Content-Type": "multipart/form-data"
    }
   };
   // 上传图片的文件名
   let cropFileName =
    this.$options._myOpt.originalFile.name.match(/([^\/]+)(?=\.)/gi)[0] ||
    Date.now().toString();
   this.$refs.cropper.getCropBlob(blob => {
   // IE 和 Edge 不支持 File 构造函数
    let cropFile = new File(
     [blob],
     cropFileName.toString() + "." + (this.cropperConfig.outputType || "jpg"),
     { type: blob.type }
    );
    let upParams = new FormData();
    upParams.append("image", cropFile);
    upParams.append("filename", cropFile.fileName);
    axios.post(this.up_action, upParams).then(({ data }) => {
     if (data.status === 0) {
      this.coverUlr = window.URL.createObjectURL(blob);
      this.pathToParent({
       fileId: data.result.fileId,
       fileExt: data.result.fileExt
      });
     } else {
      this.coverUlr = "";
      this.pathToParent({
       fileId: "",
       fileExt: ""
      });
     }
    });
   });
   this.dialogVisible = false;
  }
  // 向父组件传递上传文件成功之后后台返回的数据
  function pathToParent(filePath) {
   this.$emit("getFilePath", filePath);
  }

以上就是vue 图片裁剪上传组件的实现的详细内容,更多关于vue 图片裁剪上传组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
简单实现jquery焦点图
Dec 12 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 #Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 #Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 #Javascript
vant 中van-list的用法说明
Nov 11 #Javascript
让Vue响应Map或Set的变化操作
Nov 11 #Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 #Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 #Javascript
You might like
php学习之 循环结构实现代码
2011/06/09 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
如何快速上手Vuex
2017/02/14 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
大四学年自我鉴定
2013/11/13 职场文书
机电一体化自荐信
2013/12/10 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
生物技术专业求职信
2014/06/10 职场文书
学校交通安全责任书
2014/08/25 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
详解Python flask的前后端交互
2022/03/31 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python
DE1103使用报告
2022/04/05 无线电