hospital/admin-ui/src/components/images.vue

<template>
	<div>
		<el-image v-if="item.url" :fit="'contain'" class="imgv" :z-index="50000" :src="baseUrl + item.url" :preview-src-list="[baseUrl + item.url]"></el-image>
		<el-dialog title="图片剪裁" :visible.sync="open" :close-on-click-modal="false" @close="close" append-to-body>
			<div style="height: 400px">
				<vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :fixedBox="options.fixedBox" :fixed="options.fixed" :full="options.full" :fixedNumber="fixed_number" :centerBox="options.centerBox" :outputSize="options.outputSize" />
			</div>
			<div slot="footer" class="dialog-footer">
				<div class="lsw_flex">
					<div class="f">
						<div class="lsw_flex">
							<div class="f4">
								<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
									<el-button icon="el-icon-scissors">重新选取</el-button>
								</el-upload>
							</div>
							<div class="f left"><el-button type="primary" icon="el-icon-upload" @click="uploadImg()">确认上传</el-button></div>
						</div>
					</div>
					<div class="f">
						<el-button-group v-show="options.img">
							<el-button icon="el-icon-plus" @click="changeScale(1)"></el-button>
							<el-button icon="el-icon-minus" @click="changeScale(-1)"></el-button>
							<el-button icon="el-icon-refresh-left" @click="rotateLeft()"></el-button>
							<el-button icon="el-icon-refresh-right" @click="rotateRight()"></el-button>
						</el-button-group>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-upload action="#" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :http-request="requestUpload" :before-upload="beforeUpload" style="text-align: center;margin-top: 10px;">
			<el-button icon="el-icon-picture-outline" type="primary" style="border-radius: 30px;">选取图片</el-button>
		</el-upload>
	</div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
import { uploadFile } from '@/api/common';
export default {
	components: { VueCropper },
	props: {
		item: {
			type: Object,
			default: {}
		},
		fixed_number: {
			type: Array,
			default: () => [6, 4.5]
		}
	},
	data() {
		return {
			open: false,
			visible: false, //是否显示cropper
			options: {
				limit: 1,
				img: '', //裁剪图片的地址
				autoCrop: true, //是否默认生成截图框
				outputSize: 0.8, //裁剪生成图片的质量
				/* fixedNumber: [21, 9], //截图框的宽高比例 */
				fixed: true, // 是否开启截图框宽高固定比例
				full: true, //是否输出原图比例的截图
				fixedBox: false, //固定截图框大小 不允许改变
				centerBox: true //截图框是否被限制在图片里面
			}
		};
	},
	methods: {
		editCropper(data) {
			this.open = true;
			this.visible = true;
			this.options.img = data;
		},
		// 向左旋转
		rotateLeft() {
			this.$refs.cropper.rotateLeft();
		},
		// 向右旋转
		rotateRight() {
			this.$refs.cropper.rotateRight();
		},
		// 图片缩放
		changeScale(num) {
			num = num || 1;
			this.$refs.cropper.changeScale(num);
		},
		// 覆盖默认的上传行为
		requestUpload() {},
		// 上传预处理
		beforeUpload(file) {
			if (file.type.indexOf('image/') == -1) {
				this.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
				return;
			} else {
				const reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = () => {
					this.options.img = reader.result;
					this.open = true;
				};
			}
		},
		// 上传图片
		uploadImg() {
			if (this.options.img == '') {
				this.$modal.msgError('请选取图片');
				return;
			}
			this.$refs.cropper.getCropBlob(data => {
				let formData = new FormData();
				formData.append('file', data);
				formData.append('uncompressed', true); //是否压缩
				uploadFile(formData)
					.then(response => {
						if (response.code === 200) {
							//this.$emit('input', response.fileName);
							this.item.url = response.fileName;
							this.ajax({ method: 'post', url: '/work/banner/edit', data: { id: this.item.id, url: response.fileName } }).then(response => {
								this.$modal.msgSuccess('上传成功');
								this.open = false;
							});
						}
					})
					.catch(() => {
						this.$modal.msgError('上传失败');
					});
			});
		},
		// 关闭弹窗表单重置
		close() {
			this.open = false;
		}
	}
};
</script>
<style lang="scss">
.imgv {
	width: 100%;
	height: 150px;
	border-radius: 5px;
}
.lsw_flex {
	display: flex;
	.f {
		flex: 1;
	}
	.left {
		float: left;
		margin-left: 10px;
	}
}
</style>