✨ init Project

src/components/upload/QR-code.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-button type="primary" icon="iphone" @click="createQrCode"> 扫码上传</el-button>
+  </div>
+
+  <el-dialog v-model="dialogVisible" title="扫码上传" width="320px" :show-close="false" append-to-body :close-on-click-modal="false"
+             draggable
+  >
+    <div class="m-2">
+      <vue-qr :logoSrc="logoSrc"
+              :size="291"
+              :margin="0"
+              :autoColor="true"
+              :dotScale="1"
+              :text="codeUrl"
+              colorDark="green"
+              colorLight="white"
+              ref="qrcode"
+      />
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onFinished">完成上传</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import logoSrc from '@/assets/logo.png'
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'
+import { ref } from 'vue'
+import { useUserStore } from '@/pinia/modules/user'
+
+defineOptions({
+  name: 'QRCodeUpload'
+})
+
+const emit = defineEmits(['on-success'])
+
+const props = defineProps({
+  classId: {
+    type: Number,
+    default: 0
+  }
+})
+
+const dialogVisible = ref(false)
+const userStore = useUserStore()
+const codeUrl = ref('')
+
+const createQrCode = () => {
+  const local = window.location
+  codeUrl.value = local.protocol + '//' + local.host + '/#/scanUpload?id=' + props.classId + '&token=' + userStore.token + '&t=' + Date.now()
+  dialogVisible.value = true
+  console.log(codeUrl.value)
+}
+
+const onFinished = () => {
+  dialogVisible.value = false
+  codeUrl.value = ''
+  emit('on-success', '')
+}
+</script>

src/components/upload/common.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-upload
+      :action="`${getBaseUrl()}/fileUploadAndDownload/upload`"
+      :before-upload="checkFile"
+      :on-error="uploadError"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
+      :data="{'classId': props.classId}"
+      :headers="{'x-token': token}"
+      multiple
+      class="upload-btn"
+    >
+      <el-button type="primary" :icon="Upload">普通上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { isVideoMime, isImageMime } from '@/utils/image'
+  import { getBaseUrl } from '@/utils/format'
+  import { Upload } from "@element-plus/icons-vue";
+  import { useUserStore } from "@/pinia";
+
+  defineOptions({
+    name: 'UploadCommon'
+  })
+
+  const userStore = useUserStore()
+
+  const token = userStore.token
+
+  const props = defineProps({
+    classId: {
+      type: Number,
+      default: 0
+    }
+  })
+
+  const emit = defineEmits(['on-success'])
+
+  const fullscreenLoading = ref(false)
+
+  const checkFile = (file) => {
+    fullscreenLoading.value = true
+    const isLt500K = file.size / 1024 / 1024 < 0.5 // 500K, @todo 应支持在项目中设置
+    const isLt5M = file.size / 1024 / 1024 < 5 // 5MB, @todo 应支持项目中设置
+    const isVideo = isVideoMime(file.type)
+    const isImage = isImageMime(file.type)
+    let pass = true
+    if (!isVideo && !isImage) {
+      ElMessage.error(
+        '上传图片只能是 jpg,png,svg,webp 格式, 上传视频只能是 mp4,webm 格式!'
+      )
+      fullscreenLoading.value = false
+      pass = false
+    }
+    if (!isLt5M && isVideo) {
+      ElMessage.error('上传视频大小不能超过 5MB')
+      fullscreenLoading.value = false
+      pass = false
+    }
+    if (!isLt500K && isImage) {
+      ElMessage.error('未压缩的上传图片大小不能超过 500KB，请使用压缩上传')
+      fullscreenLoading.value = false
+      pass = false
+    }
+
+    console.log('upload file check result: ', pass)
+
+    return pass
+  }
+
+  const uploadSuccess = (res) => {
+    const { data } = res
+    if (data.file) {
+      emit('on-success', data.file.url)
+    }
+  }
+
+  const uploadError = () => {
+    ElMessage({
+      type: 'error',
+      message: '上传失败'
+    })
+    fullscreenLoading.value = false
+  }
+</script>

src/components/upload/cropper.vue

@@ -0,0 +1,237 @@
+<template>
+  <el-upload
+      ref="uploadRef"
+      :action="`${getBaseUrl()}/fileUploadAndDownload/upload`"
+      accept="image/*"
+      :show-file-list="false"
+      :auto-upload="false"
+      :data="{'classId': props.classId}"
+      :on-success="handleImageSuccess"
+      :on-change="handleFileChange"
+      :headers="{'x-token': token}"
+  >
+    <el-button type="primary" icon="crop"> 裁剪上传</el-button>
+  </el-upload>
+
+  <el-dialog v-model="dialogVisible" title="图片裁剪" width="1200px" append-to-body @close="dialogVisible = false" :close-on-click-modal="false" draggable>
+    <div class="flex gap-[30px] h-[600px]">
+      <!-- 左侧编辑区 -->
+      <div class="flex flex-col flex-1">
+        <div class="flex-1 bg-[#f8f8f8] rounded-lg overflow-hidden">
+          <VueCropper
+              ref="cropperRef"
+              :img="imgSrc"
+              outputType="jpeg"
+              :autoCrop="true"
+              :autoCropWidth="cropWidth"
+              :autoCropHeight="cropHeight"
+              :fixedBox="false"
+              :fixed="fixedRatio"
+              :fixedNumber="fixedNumber"
+              :centerBox="true"
+              :canMoveBox="true"
+              :full="false"
+              :maxImgSize="1200"
+              :original="true"
+              @realTime="handleRealTime"
+          ></VueCropper>
+        </div>
+
+        <!-- 工具栏 -->
+        <div class="mt-[20px] flex items-center p-[10px] bg-white rounded-lg shadow-[0_2px_12px_rgba(0,0,0,0.1)]">
+          <el-button-group>
+            <el-tooltip content="向左旋转">
+              <el-button @click="rotate(-90)" :icon="RefreshLeft" />
+            </el-tooltip>
+            <el-tooltip content="向右旋转">
+              <el-button @click="rotate(90)" :icon="RefreshRight" />
+            </el-tooltip>
+            <el-button :icon="Plus" @click="changeScale(1)"></el-button>
+            <el-button :icon="Minus" @click="changeScale(-1)"></el-button>
+          </el-button-group>
+
+
+          <el-select v-model="currentRatio" placeholder="选择比例" class="w-32 ml-4" @change="onCurrentRatio">
+            <el-option v-for="(item, index) in ratioOptions" :key="index" :label="item.label" :value="index" />
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 右侧预览区 -->
+      <div class="w-[340px]">
+        <div class="bg-white p-5 rounded-lg shadow-[0_2px_12px_rgba(0,0,0,0.1)]">
+          <div class="mb-[15px] text-gray-600">裁剪预览</div>
+          <div class="bg-white p-5 rounded-lg shadow-[0_2px_12px_rgba(0,0,0,0.1)]"
+               :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}"
+          >
+            <div class="w-full h-full relative overflow-hidden">
+              <img :src="previews.url" :style="previews.img" alt="" class="max-w-none absolute transition-all duration-300 ease-in-out image-render-pixelated origin-[0_0]" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleUpload" :loading="uploading"> {{ uploading ? '上传中...' : '上 传' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { RefreshLeft, RefreshRight, Plus, Minus } from '@element-plus/icons-vue'
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper'
+import { getBaseUrl } from '@/utils/format'
+import { useUserStore } from "@/pinia";
+
+defineOptions({
+  name: 'CropperImage'
+})
+
+const emit = defineEmits(['on-success'])
+
+const props = defineProps({
+  classId: {
+    type: Number,
+    default: 0
+  }
+})
+
+const uploadRef = ref(null)
+// 响应式数据
+const dialogVisible = ref(false)
+const imgSrc = ref('')
+const cropperRef = ref(null)
+const { proxy } = getCurrentInstance()
+const previews = ref({})
+const uploading = ref(false)
+
+// 缩放控制
+const changeScale = (value) => {
+  proxy.$refs.cropperRef.changeScale(value)
+}
+
+// 比例预设
+const ratioOptions = ref([
+  { label: '1:1', value: [1, 1] },
+  { label: '16:9', value: [16, 9] },
+  { label: '9:16', value: [9, 16] },
+  { label: '4:3', value: [4, 3] },
+  { label: '自由比例', value: [] }
+])
+
+const fixedNumber = ref([1, 1])
+const cropWidth = ref(300)
+const cropHeight = ref(300)
+
+const fixedRatio = ref(false)
+const currentRatio = ref(4)
+const onCurrentRatio = () => {
+  fixedNumber.value = ratioOptions.value[currentRatio.value].value
+  switch (currentRatio.value) {
+    case 0:
+      cropWidth.value = 300
+      cropHeight.value = 300
+      fixedRatio.value = true
+      break
+    case 1:
+      cropWidth.value = 300
+      cropHeight.value = 300 * 9 / 16
+      fixedRatio.value = true
+      break
+    case 2:
+      cropWidth.value = 300 * 9 / 16
+      cropHeight.value = 300
+      fixedRatio.value = true
+      break
+    case 3:
+      cropWidth.value = 300
+      cropHeight.value = 300 * 3 / 4
+      fixedRatio.value = true
+      break
+    default:
+      cropWidth.value = 300
+      cropHeight.value = 300
+      fixedRatio.value = false
+  }
+}
+
+// 文件处理
+const handleFileChange = (file) => {
+  const isImage = file.raw.type.includes('image')
+  if (!isImage) {
+    ElMessage.error('请选择图片文件')
+    return
+  }
+
+  if (file.raw.size / 1024 / 1024 > 8) {
+    ElMessage.error('文件大小不能超过8MB!')
+    return false
+  }
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    imgSrc.value = e.target.result
+    dialogVisible.value = true
+  }
+  reader.readAsDataURL(file.raw)
+}
+
+// 旋转控制
+const rotate = (degree) => {
+  if (degree === -90) {
+    proxy.$refs.cropperRef.rotateLeft()
+  } else {
+    proxy.$refs.cropperRef.rotateRight()
+  }
+}
+
+// 实时预览
+const handleRealTime = (data) => {
+  previews.value = data
+  //console.log(data)
+}
+
+// 上传处理
+const handleUpload = () => {
+  uploading.value = true
+  proxy.$refs.cropperRef.getCropBlob((blob) => {
+    try {
+      const file = new File([blob], `${Date.now()}.jpg`, { type: 'image/jpeg' })
+      uploadRef.value.clearFiles()
+      uploadRef.value.handleStart(file)
+      uploadRef.value.submit()
+
+    } catch (error) {
+      uploading.value = false
+      ElMessage.error('上传失败: ' + error.message)
+    }
+  })
+}
+
+const handleImageSuccess = (res) => {
+  const { data } = res
+  if (data) {
+    setTimeout(() => {
+      uploading.value = false
+      dialogVisible.value = false
+      previews.value = {}
+      ElMessage.success('上传成功')
+      emit('on-success', data.url)
+    }, 1000)
+  }
+}
+
+</script>
+
+<style scoped>
+:deep(.vue-cropper) {
+  background: transparent;
+}
+</style>

src/components/upload/image.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <el-upload
+      :action="`${getBaseUrl()}/fileUploadAndDownload/upload`"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      :before-upload="beforeImageUpload"
+      :multiple="false"
+      :data="{'classId': props.classId}"
+      :headers="{'x-token': token}"
+    >
+      <el-button type="primary" :icon="Upload">压缩上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+  import ImageCompress from '@/utils/image'
+  import { ElMessage } from 'element-plus'
+  import { getBaseUrl } from '@/utils/format'
+  import { Upload } from "@element-plus/icons-vue";
+  import { useUserStore } from "@/pinia";
+
+  defineOptions({
+    name: 'UploadImage'
+  })
+
+  const emit = defineEmits(['on-success'])
+  const props = defineProps({
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    fileSize: {
+      type: Number,
+      default: 2048 // 2M 超出后执行压缩
+    },
+    maxWH: {
+      type: Number,
+      default: 1920 // 图片长宽上限
+    },
+    classId: {
+      type: Number,
+      default: 0
+    }
+  })
+
+  const userStore = useUserStore()
+
+  const token = userStore.token
+
+  const beforeImageUpload = (file) => {
+    const isJPG = file.type?.toLowerCase() === 'image/jpeg'
+    const isPng = file.type?.toLowerCase() === 'image/png'
+    if (!isJPG && !isPng) {
+      ElMessage.error('上传头像图片只能是 jpg或png 格式!')
+      return false
+    }
+
+    const isRightSize = file.size / 1024 < props.fileSize
+    if (!isRightSize) {
+      // 压缩
+      const compress = new ImageCompress(file, props.fileSize, props.maxWH)
+      return compress.compress()
+    }
+    return isRightSize
+  }
+
+  const handleImageSuccess = (res) => {
+    const { data } = res
+    if (data.file) {
+      emit('on-success', data.file.url)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image-uploader {
+    border: 1px dashed #d9d9d9;
+    width: 180px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .image-uploader {
+    border-color: #409eff;
+  }
+  .image-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .image {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>