vue中上传图片并裁剪

先安装

npm install vue-cropper // npm 安装
yarn add vue-cropper // yarn 安装

 引用

// 全局引用

main.js import VueCropper from 'vue-cropper'

Vue.use(VueCropper) 

上传按钮

<el-upload
　:class="{hide:hideUpload}"
multiple
:file-list="imageUrl1"
:action="action"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="limit"
:headers="headers"
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
>
<i class="el-icon-plus"></i>
</el-upload>

 弹出的裁剪框

<!-- vueCropper 剪裁图片实现-->
<el-dialog
title="图片剪裁"
:visible.sync="dialogVisible"
class="crop-dialog"
append-to-body
>
<div class="cropper-content">
<div class="cropper" style="text-align: center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
@cropMoving="cropMoving"
/>
</div>
</div>
<div class="action-box">
<!-- <el-upload
class="upload-demo"
action=""
:auto-upload="false"
:show-file-list="false"
:on-change="handleAvatarSuccess"
> -->
<!-- <el-upload
　:class="{hide:hideUpload}"
multiple
:file-list="imageUrl1"
:action="action"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="limit"
:headers="headers"
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:show-file-list="false"
>
<el-button type="primary" plain>更换图片</el-button>
</el-upload> -->
<!-- <el-button type="primary" plain @click="clearImgHandle">
清除图片
</el-button> -->
<el-button type="primary" plain @click="rotateLeftHandle">
左旋转
</el-button>
<el-button type="primary" plain @click="rotateRightHandle">
右旋转
</el-button>
<el-button type="primary" plain @click="changeScaleHandle(1)">
放 大
</el-button>
<el-button type="primary" plain @click="changeScaleHandle(-1)">
缩 小
</el-button>
<!-- <el-button type="primary" plain @click="downloadHandle('blob')"
>下载</el-button
> -->
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish" :loading="loading">
确 认
</el-button>
</div>
</el-dialog>

data(){
return {
dialogimgVisible: false,
action: process.env.VUE_APP_BASE_API + "/ksUser/submitAttachment",
headers: {},
imageUrl1: [],
// 裁剪框
isPreview: false,
dialogVisible: false,
previewImg: "", // 预览图片地址
// 裁剪组件的基础配置option
option: {
img: "", // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: "png", // 裁剪生成图片的格式
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
canMoveBox: true, // 截图框能否拖动
autoCropWidth: 0, // 默认生成截图框宽度
autoCropHeight: 0, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: false, // 是否输出原图比例的截图
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
// 防止重复提交
loading: false,
fileNames: "", //图片的名称
imgList: [],
}
}

methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogimgVisible = true;
},
// 上传成功
handleAvatarSuccess(res, file) {
// console.log(res, "上传");
console.log(file, "上传成功文件");
// console.log(this.imgIndex, "第几个上传");
this.fileNames = file.response.name;
this.imageUrl1.push(file.response);
this.hideUpload = this.imageUrl1.length >= this.limit;
// 上传成功后将图片地址赋值给裁剪框显示图片
if (this.option.autoCropWidth != 0) {
this.$nextTick(async () => {
// base64方式
// this.option.img = await fileByBase64(file.raw)
this.option.img = file.response.url;
this.loading = false;
this.dialogVisible = true;
});
} else {
// var imgs = [];
this.imgList.push(file.response.fileName);
this.$emit("getUpload", this.imgList);
}
},
// 放大/缩小
changeScaleHandle(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 左旋转
rotateLeftHandle() {
this.$refs.cropper.rotateLeft();
},
// 右旋转
rotateRightHandle() {
this.$refs.cropper.rotateRight();
},
// 下载
downloadHandle(type) {
let aLink = document.createElement("a");
aLink.download = "author-img";
if (type === "blob") {
this.$refs.cropper.getCropBlob((data) => {
let downImg = window.URL.createObjectURL(data);
aLink.href = window.URL.createObjectURL(data);
aLink.click();
});
} else {
this.$refs.cropper.getCropData((data) => {
let downImg = data;
aLink.href = data;
aLink.click();
});
}
},
// 清理图片
clearImgHandle() {
this.option.img = "";
},
// 截图框移动回调函数
cropMoving(data) {
// 截图框的左上角 x，y和右下角坐标x，y
// let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
// console.log(cropAxis)
},
finish() {
// 获取截图的 blob 数据
// this.$refs.cropper.getCropBlob((blob) => {
//
console.log(blob, "blob数据");
//
this.loading = true;
//
this.dialogVisible = false;
//
this.previewImg = URL.createObjectURL(blob);
//
console.log(this.previewImg, "this.previewImg确认");
//
this.isPreview = true;
// });
// 获取截图的 base64 数据
this.loading = true;
this.$refs.cropper.getCropData((data) => {
// console.log(data, "获取截图的 base64 数据");
var fileNamed = this.base64ToFile(data, this.fileNames);
// console.log(fileNamed, "fileNamed图片转换成的filename ");
let formData = new FormData();
formData.append("file", fileNamed); //非常重要的一步 这是将base64转换成file传给后端的关键
// formData.append("flag", "videoImg"); // 额外参数
submitAttachment(formData).then((res) => {
if (res.code == 200) {
this.$message.success("上传成功");
this.imgList.push(res.fileName);
this.$emit("getUpload", this.imgList);//将上传完成的图片传给父组件
this.dialogVisible = false;
}
});
});
},
//将base64格式转换为文件格式，因为我这向后台提交数据时需要文件格式
base64ToFile(urlData, fileName) {
let arr = urlData.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length;
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
},
// 限制选择
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择${this.limit}个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
// 移除
beforeRemove(file, fileList) {
this.$confirm(`确定移除该图片？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
const filePath = file.url;
const i = this.imageUrl1.findIndex((x) => x.url === filePath);
// 3.调用splice方法，移除图片信息
this.imageUrl1.splice(i, 1);
if (this.imgIndex == 1) {
this.list.householdRegisters.splice(i, 1);
// this.list.householdRegisters = "";
this.hideUpload = this.imageUrl1.length >= this.limit;
}
if (this.imgIndex == 2) {
// this.list.idPhotos = "";
this.list.idPhotos.splice(i, 1);
this.hideUpload = this.imageUrl1.length >= this.limit;
}
if (this.imgIndex == 3) {
// this.list.diplomas = "";
this.list.diplomas.splice(i, 1);
this.hideUpload = this.imageUrl1.length >= this.limit;
}
if (this.imgIndex == 4) {
// this.list.proofOfEmployments = "";
this.list.proofOfEmployments.splice(i, 1);
this.hideUpload = this.imageUrl1.length >= this.limit;
}
if (this.imgIndex == 5) {
// this.list.honorCertificates = "";
this.list.honorCertificates.splice(i, 1);
this.hideUpload = this.imageUrl1.length >= this.limit;
}
if (this.imgIndex == 6) {
// this.list.videoUploads = "";
this.list.videoUploads.splice(i, 1);
this.hideUpload = this.imageUrl1.length >= this.limit;
}
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},

是参照这位博主的改进的  仅作为本人的学习积累笔记  如有侵权 私信我删除谢谢vue+element实现图片上传及裁剪功能（vue-cropper）_努力搬砖的阿一的博客-CSDN博客_element 图片裁切

最后

以上就是能干狗为你收集整理的vue中上传图片并裁剪的全部内容，希望文章能够帮你解决vue中上传图片并裁剪所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。