xinyilu/NurseStationOperateUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2022-11-16 13:21:48 +08:00
parent e80fb60fab
commit 53106187dc
1 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/system/stationAvatar/index.vue
View File

@ -8,7 +8,7 @@
<img
v-if="options.img"
v-bind:src="options.img"
title="点击上传头像"
title="点击上传图片"
style="width: 100px; height: 100px; line-height: 200px"
/>
<i
@ -24,15 +24,15 @@
</div>
<el-dialog
:title="title"
title="上传图片"
:visible.sync="openimg"
width="800px"
width="950px"
append-to-body
@opened="modalOpened"
@close="closeDialog"
>
<el-row>
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
<el-col :xs="24" :md="0" :style="{ height: '350px' }">
<vue-cropper
ref="cropper"
:img="options.img"
@ -47,7 +47,12 @@
</el-col>
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
<img
style="width: 100%; height: 100%"
v-if="previews.url"
:src="previews.url"
/>
<div v-else></div>
</div>
</el-col>
</el-row>
@ -126,8 +131,8 @@ export default {
options: {
img: null, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
autoCropWidth: 300, // 默认生成截图框宽度
autoCropHeight: 300, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
},
previews: {},
@ -200,34 +205,34 @@ export default {
);
} else {
const reader = new FileReader();
this.previews.data = file;
this.previews.url = URL.createObjectURL(file);
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
// this.options.img = reader.result;
};
}
},
// 上传图片
uploadImg() {
// console.log(this.types);
this.$refs.cropper.getCropBlob((data) => {
let formData = new FormData();
formData.append("file", data);
formData.append("type", this.types);
updateNurseStationHeads(formData).then((response) => {
this.options.img = baseurl + response.imgUrl;
this.$emit("imgUrl", response.imgUrl);
console.log(this.items);
console.log(this.types);
if (this.types == "attributePitureUrl") {
this.items.attributePitureUrl = response.imgUrl;
this.$emit("item", JSON.stringify(this.items));
}
this.openimg = false;
});
let formData = new FormData();
formData.append("file", this.previews.data);
formData.append("type", this.types);
updateNurseStationHeads(formData).then((response) => {
this.options.img = baseurl + response.imgUrl;
this.$emit("imgUrl", response.imgUrl);
console.log(this.items);
console.log(this.types);
if (this.types == "attributePitureUrl") {
this.items.attributePitureUrl = response.imgUrl;
this.$emit("item", JSON.stringify(this.items));
}
this.openimg = false;
});
},
// 实时预览
realTime(data) {
console.log(data);
this.previews = data;
},
// 关闭窗口
@ -239,6 +244,17 @@ export default {
};
</script>
<style scoped lang="scss">
.avatar-upload-preview {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 300px;
height: 300px;
border-radius: 0%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
.user-info-head {
position: relative;
display: inline-block;