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(); }); }); - } - } + }, + }, };