先看一下总体效果:
上传文件做了大小和类型的限制,在动图中无法展现出来。
使用file类型的input实现选择本地文件
但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下。
- 方法1:使用label元素来触发一个隐藏的file类型的 input元素;(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug)
1
2
|
< input type = "file" id = 'up_file_input' v-show = 'false' > < label for = 'up_file_input' ></ label > |
- 方法2:或者在这个label元素的click事件函数中手动触发文件上传按钮的click事件。
1
2
|
< input type = "file" v-show = 'false' ref = "inputFileUp" > < label @ click = '$refs.inputFileUp.click()' ></ label > |
使用input的change事件获取选择的本地图片并进行校验
上传图片的校验规则及提示语由父组件通过 prop 传递给子组件,格式如下:
1
2
3
4
5
6
|
const img_valit = { type: /^.*\.(jpg|png|jpeg)$/i, // 文件格式校验 type_error_msg: '上传头像图片只能是 jpg 或者 png 格式!' , size: 3, // 文件大小校验 size_error_msg: '上传的图片大小不能超过3MB' } |
这里需要注意: 需要在上传文件按钮的click事件中手动清空这个文件类型输入框的值,解决选择和上次相同的文件之后无法触发 change事件的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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。图片裁剪插件中的一些配置可以参考插件官方文档,下面的代码中省略了配置部分的代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< 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: 文件名}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
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 图片裁剪上传组件的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.im/post/6893788892944662541?utm_source=tuicool&utm_medium=referral