图片裁剪

package.json

@@ -58,6 +58,7 @@
     "vue-router": "^4.3.2",
     "vue-types": "^4.2.1",
     "vuedraggable": "^4.1.0",
+    "vue-cropper": "0.5.8",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/components/Upload/Image.vue

@@ -38,7 +38,7 @@
 				<div class="upload-empty">
 					<slot name="empty">
 						<el-icon v-if="!loading"><Plus /></el-icon>
-            <span v-else>上传中{{progress}}%</span>
+            			<span v-else>上传中{{progress}}%</span>
 						<!-- <span>请上传图片</span> -->
 					</slot>
 				</div>
@@ -51,9 +51,17 @@
 			:teleported="true"
 			v-if="imgViewVisible"
 			@close="imgViewVisible = false"
-			:url-list="[imageUrl.includes('http') ? imageUrl : baseURL + imageUrl]"
+			:url-list="[imageUrl]"
 		/>
 	</div>
+	<Cropper
+      v-model:visible="cropperVisible"
+      v-if="cropperVisible"
+      :cropperSize="cropperSize"
+      :oImg="oImg"
+      @success="cropperSuccess"
+      :fileName="fileName"
+  ></Cropper>
 </template>
 
 <script setup lang="ts" name="UploadImg">
@@ -62,6 +70,7 @@ import { ElNotification, formContextKey, formItemContextKey } from 'element-plus
 import type { UploadProps, UploadRequestOptions } from 'element-plus';
 import { generateUUID } from '@/utils/auth';
 import {upload} from '@/api/common'
+import Cropper from '@/components/Upload/cropper.vue'
 
 interface UploadFileProps {
 	imageUrl?: string; // 图片地址 ==> 必传
@@ -75,9 +84,11 @@ interface UploadFileProps {
 	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
 	iconSize?: number;
   	name?: string;
+	cropper:Boolean,
+	cropperSize?:Object
 }
 
-
+const cropperVisible=ref(false)
 // 接受父组件参数
 const props = withDefaults(defineProps<UploadFileProps>(), {
 	imageUrl: '',
@@ -89,7 +100,9 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
 	height: '150px',
 	width: '150px',
 	borderRadius: '8px',
-	name:''
+	name:'',
+	cropper:false,
+  	cropperSize:null
 });
 
 // 生成组件唯一id
@@ -122,10 +135,15 @@ interface UploadEmits {
 	(e: 'update:imageUrl', value: string): void,
   (e: 'changeFileName', value: string): void;
 }
+
+const fileName=ref('')
+const oImg=ref('')
 const emit = defineEmits<UploadEmits>();
 const loading=ref(false)
 const progress=ref(0)
-
+const cropperSuccess=(fileChile:any)=>{
+  actionFile(fileChile)
+}
 const actionFile=async (fileChild:any)=>{
   loading.value=true
   try {
@@ -133,7 +151,6 @@ const actionFile=async (fileChild:any)=>{
     formData.append('file',fileChild)
     formData.append('name',props.name)
     const res =await upload(formData)
-	console.log(res)
     emit('update:imageUrl',res.fileUrl);
     emit('changeFileName',res.originalName)
     // 调用 el-form 内部的校验方法（可自动校验）
@@ -151,6 +168,22 @@ const handleHttpUploadOptions=ref({})
 
 const handleHttpUpload = async (options: UploadRequestOptions) => {
   handleHttpUploadOptions.value=options
+  if(props.cropper){
+    fileName.value= options.file.name
+    let reader = new FileReader();
+    reader.readAsDataURL(options.file);
+    let img = new Image();
+    reader.onload = function (e) {
+      img.src = this.result;
+      img.onload = function () {
+        let base = e.target.result;
+        oImg.value= base;
+        event.target.value = "";
+        cropperVisible.value = true;
+      };
+    };
+    return
+  }
   actionFile(options.file)
 };
 

src/components/Upload/cropper.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-dialog
+      v-model="props.visible"
+      title="图片裁剪"
+      :append-to-body="true"
+      class="cropper_model_dlg"
+      width="500"
+      :close-on-click-modal="false"
+      :before-close="dialogClose"
+  >
+    <div class="cropper_content">
+      <div class="cropper" style="text-align: center;">
+        <vueCropper
+            ref="cropperRef"
+            :img="options.img"
+            :outputSize="options.outputSize"
+            :outputType="options.outputType"
+            :info="options.info"
+            :canScale="options.canScale"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixed="options.fixed"
+            :maximgSize="options.maximgSize"
+            :fixedBox="options.fixedBox"
+            :enlarge="options.enlarge"
+            :fixedNumber="options.fixedNumber"
+        ></vueCropper>
+      </div>
+      <div class="cropper_btns">
+        <el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转"></el-button>
+        <el-button @click="rotateRight" icon="RefreshRight" size="mini" title="右旋转"></el-button>
+        <el-button @click="changeScale(1)" size="mini" title="放大">+</el-button>
+        <el-button @click="changeScale(-1)" size="mini" title="缩小">-</el-button>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button type="primary" @click="submit">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import VueCropper from "vue-cropper/src/vue-cropper.vue";
+import { ref, reactive} from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  cropperSize: {
+    type: Object,
+    default() {
+      return null;
+    }
+  },
+  oImg: {
+    type: String,
+    default: ""
+  },
+  fileName: {
+    type: String,
+    default: ""
+  },
+  folder: {
+    type: String,
+    default: ""
+  }
+});
+
+const dialogClose = () => {
+  emit("update:visible", false);
+};
+const options = reactive({
+  img: props.oImg, // 裁剪图片的地址
+  outputSize: 1, // 裁剪生成图片的质量
+  outputType: "png", // 裁剪生成图片的格式
+  info: true, // 裁剪框的大小信息
+  canScale: true, // 图片是否允许滚动缩放
+  autoCrop: true, // 是否默认生成截图框
+  autoCropWidth: props.cropperSize ? props.cropperSize.width : 200, // 默认生成截图框宽度
+  autoCropHeight: props.cropperSize ? props.cropperSize.height : 200, // 默认生成截图框高度
+  fixed: false, // 是否开启截图框宽高固定比例
+  fixedNumber: [1, 1], // 截图框的宽高比例
+  full: true, // 是否输出原图比例的截图
+  fixedBox: true, // 固定截图框大小 不允许改变
+  canMove: true, // 上传图片是否可以移动
+  canMoveBox: true, // 截图框能否拖动
+  original: true, // 上传图片按照原始比例渲染
+  centerBox: false, // 截图框是否被限制在图片里面
+  high: false, // 是否按照设备的dpr输出等比例图片
+  infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
+  maximgSize: 100, // 限制图片最大宽度和高度
+  enlarge: 1, // 图片根据截图框输出比例倍数
+  mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
+});
+const cropperRef = ref();
+
+const addImgLoading = ref(false);
+
+// 左旋转
+const rotateLeft = () => {
+  cropperRef.value.rotateLeft();
+};
+// 右旋转
+const rotateRight = () => {
+  cropperRef.value.rotateRight();
+};
+// 放大缩小
+const changeScale = (num: any) => {
+  num = num || 1;
+  cropperRef.value.changeScale(num);
+};
+
+const emit = defineEmits(["success", "update:visible"]);
+
+// base64转图片文件
+const dataURLtoFile=(dataurl:any, filename:any)=> {
+  let arr = dataurl.split(",");
+  let mime = arr[0].match(/:(.*?);/)[1];
+  let bstr = atob(arr[1]);
+  let len = bstr.length;
+  let u8arr = new Uint8Array(len);
+  while (len--) {
+    u8arr[len] = bstr.charCodeAt(len);
+  }
+  return new File([u8arr], filename, {type: mime});
+}
+
+const submit=()=>{
+  cropperRef.value.getCropData(fileData => {
+    let file = dataURLtoFile(fileData, props.fileName);
+    emit("update:visible", false);
+    emit('success',file)
+  })
+}
+
+// 暴露变量
+defineExpose({});
+</script>
+
+<style lang="scss">
+.cropper_model_dlg {
+  .el-dialog__body {
+    padding: 0px 20px 60px !important
+  }
+
+  .cropper_content {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .add-img {
+    opacity: 0;
+    position: absolute;
+    width: 80px;
+    height: 28px;
+    top: 0px;
+    left: 0px;
+  }
+
+  .cropper {
+    width: 400px;
+    height: 400px;
+    background: yellow;
+  }
+
+  .cropper500 {
+    width: 600px;
+    height: 600px;
+    background: yellow;
+    border: 1px solid #e3e3e3;
+  }
+
+  .cropper_right {
+    width: 520px;
+    text-align: center;
+  }
+
+  .cropper_preview {
+    margin: 0 auto;
+    display: inline-block;
+    border: 1px solid #ddd;
+  }
+
+  .cropper_btns {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/system/user/edit.vue

@@ -101,6 +101,7 @@
                        :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
                        name="user"
                        :fileSize="200"
+                       :cropper="true"
                        v-model:image-url="formData.avatar">
               <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
             </UploadImg>
@@ -149,9 +150,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["success", "update:visible"]);
-const uploadHeaders = reactive({
-  authorization: useUserStore().getToken
-});
 const formData = reactive({
   id: 0,
   avatarName:'',