先看一下总体效果:
上传文件做了大小和类型的限制,在动图中无法展现出来。
使用file类型的input实现选择本地文件
但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下。
<input type="file" id='up_file_input' v-show='false' > <label for='up_file_input'></label>
<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 图片裁剪上传组件的资料请关注小牛知识库其它相关文章!
本文向大家介绍vue实现图片裁剪后上传,包括了vue实现图片裁剪后上传的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现图片裁剪后上传的具体代码,供大家参考,具体内容如下 一、背景 目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形。(其它地方有时会有5:4或者16:9的需求,但较少)。所以需要对上传的图片先进行裁
本文向大家介绍vue实现移动端图片裁剪上传功能,包括了vue实现移动端图片裁剪上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1.安装cropperjs依赖库 npm install cropperjs 2.编写组件SimpleCropper.vue 3.引用组件 4.示例图 关于vue.js组件的教程,请大家点击
本文向大家介绍vue 实现剪裁图片并上传服务器功能,包括了vue 实现剪裁图片并上传服务器功能的使用技巧和注意事项,需要的朋友参考一下 预览链接点击预览 效果图如下所示,大家感觉不错,请参考实现代码。 需求 [x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传&清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节
本文向大家介绍WEB前端实现裁剪上传图片功能,包括了WEB前端实现裁剪上传图片功能的使用技巧和注意事项,需要的朋友参考一下 最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片 拖拽读取的功能主要是要兼听html5的drag事件,这个没什么好说的,查查api就知道怎么做了,主要在于怎么读取用
本文向大家介绍JavaWeb实现裁剪图片上传完整代码,包括了JavaWeb实现裁剪图片上传完整代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaWeb实现裁剪图片上传完整案例,供大家参考,具体内容如下 实现思路 •使用jcrop插件手机要裁剪图片的坐标 •将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪 ◦后台处理流程: 1、将上传的图片按按照比例进
本文向大家介绍iOS实现裁剪框和图片剪裁功能,包括了iOS实现裁剪框和图片剪裁功能的使用技巧和注意事项,需要的朋友参考一下 图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现了一下,其实图片剪裁本身不难,主要剪裁框封装发了点时间,主要功能可以拖动四个角缩放,但不能超出父视图,拖动四个边单方向缩放,不能超出父视图,拖动中间部分单单移动,不改变大小,不能超出父