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

先看一下总体效果:

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

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

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

<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’> <div class='dialog-content'> <div class='cropper-image'> <vue-cropper ref='cropper' :img='cropImgUrl' @realTime='realTime' ></vue-cropper> </div> <!-- 图片裁剪之后的预览 --> <div class='preview-wrapper'> <div : > <div :style='previews.div'> <img :src='https://www.haobala.com/bcjs/previews.url' :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 图片裁剪上传组件的资料请关注好吧啦网其它相关文章！