vue 图片裁剪上传组件的实现
作者:游乐场 时间:2024-05-09 15:14:02
先看一下总体效果:
上传文件做了大小和类型的限制,在动图中无法展现出来。
使用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);
}
来源:https://juejin.im/post/6893788892944662541?utm_source=tuicool&utm_medium=referral
标签:vue,图片,裁剪,上传,组件
0
投稿
猜你喜欢
深入分析SQL Server的数据转换服务
2008-11-28 15:29:00
Golang协程池gopool设计与实现
2024-05-28 15:23:01
Python中最常用的操作列表的几种方法归纳
2021-01-11 22:06:05
Tensorflow 1.0之后模型文件、权重数值的读取方式
2022-01-09 21:33:18
ASP中的全角和半角之间的转化
2008-06-06 13:34:00
python中的代码编码格式转换问题
2022-02-26 02:05:02
提升设计品质的8个布局方案[译]
2010-03-18 16:06:00
浅谈Python中的字符串
2022-10-05 00:39:22
Python黑魔法之metaclass详情
2022-09-16 00:38:56
Javascript"篱式"条件判断(翻译)
2008-08-01 12:21:00
PyQt5 QSerialPort子线程操作的实现
2023-08-21 13:07:28
Python调整数组形状如何实现
2021-01-06 09:55:34
python实现雨滴下落到地面效果
2021-10-04 03:58:32
Python使用pymysql从MySQL数据库中读出数据的方法
2024-01-26 15:26:24
python 3.74 运行import numpy as np 报错lib\\site-packages\\numpy\\__init__.py
2023-11-03 07:25:24
详解Python 数据库 (sqlite3)应用
2024-01-21 06:14:46
Linux下将Python的Django项目部署到Apache服务器
2022-07-01 23:36:37
GOLang单元测试用法详解
2024-05-05 09:27:33
python实现字符串连接的三种方法及其效率、适用场景详解
2023-07-27 19:57:32
基于Python制作一个文件解压缩工具
2021-01-10 08:00:13