diff --git a/src/components/general/cropper.vue b/src/components/general/cropper.vue
index 03218848f07329cef5eb8b95fc800e4ab1e1500e..5a3aacd2246029a298053204271e5b5176813cb5 100644
--- a/src/components/general/cropper.vue
+++ b/src/components/general/cropper.vue
@@ -5,6 +5,7 @@
@@ -70,30 +73,30 @@
import { VueCropper } from "vue-cropper";
export default {
components: {
- VueCropper
+ VueCropper,
},
props: {
fileArray: {
type: Array,
default: () => {
[];
- }
+ },
},
fit: {
type: String,
- default: ""
+ default: "",
},
max: {
type: Number,
- default: 1
- }
+ default: 1,
+ },
},
watch: {
fileArray: {
handler(val) {
this.fileArr = val;
- }
- }
+ },
+ },
},
data() {
return {
@@ -104,7 +107,8 @@ export default {
canMoveBox: true, //截图框不能拖动
autoCropWidth: 200, //截图框宽度
autoCropHeight: 200, //截图框高度
- centerBox: false //截图框被限制在图片里面
+ centerBox: true, //截图框被限制在图片里面
+ mode: "cover",
},
previews: {}, //实时预览图数据
attach: {
@@ -112,16 +116,24 @@ export default {
userId: "",
customaryUrl: "", //原图片路径
laterUrl: "", //裁剪后图片路径
- attachType: "photo" //附件类型
+ attachType: "photo", //附件类型
},
fileName: "", //本机文件地址
uploadImgRelaPath: "", //上传后图片地址
- fileArr: []
+ fileArr: [],
};
},
methods: {
//控制弹出层关闭
handleClose() {
+ let abc1 = document.getElementById("upItem1");
+ let abc2 = document.getElementById("upItem2");
+ if (abc1) {
+ abc1.value = "";
+ }
+ if (abc2) {
+ abc2.value = "";
+ }
this.dialogVisible = false;
},
//实时预览
@@ -143,7 +155,7 @@ export default {
//fileReader 接口,用于异步读取文件数据
var reader = new FileReader();
reader.readAsDataURL(file); //重要 以dataURL形式读取文件
- reader.onload = e => {
+ reader.onload = (e) => {
// data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
let data = e.target.result;
@@ -158,24 +170,24 @@ export default {
//确认截图,上传
cut(type) {
var formData = new FormData();
- this.$refs.cropper.getCropBlob(res => {
+ this.$refs.cropper.getCropBlob((res) => {
//res是裁剪后图片的bolb对象
formData.append("file", res, this.userId);
formData.append("directory", "image");
let url = "/apaas/static/image/upload";
this.$http
.post(url, formData, {
- headers: { "Content-Type": "multipart/form-data" }
+ headers: { "Content-Type": "multipart/form-data" },
})
- .then(res => {
+ .then((res) => {
this.fileArr = [{ name: res.data.data, url: res.data.data }];
// 上传图片后服务器返回访问路径
this.$emit("getNewUrl", res.data.data);
this.handleClose();
});
});
- }
- }
+ },
+ },
};