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 String.replace的妙用
Sep 08 Javascript
javascript new fun的执行过程
Aug 05 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
从vue源码看props的用法
Jan 09 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
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 smarty函数扩展
2010/03/15 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现简单五子棋游戏
2019/06/18 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python extract及contains方法代码实例
2020/09/11 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
社团招新策划书
2014/02/04 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL