初始化项目

src/components/chooseImg/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-drawer v-model="drawer" title="媒体库" size="650px">
+    <warning-bar
+      title="点击“文件名/备注”可以编辑文件名或者备注内容。"
+    />
+    <div class="gva-btn-list">
+      <upload-common
+        v-model:imageCommon="imageCommon"
+        class="upload-btn-media-library"
+        @on-success="open"
+      />
+      <upload-image
+        v-model:imageUrl="imageUrl"
+        :file-size="512"
+        :max-w-h="1080"
+        class="upload-btn-media-library"
+        @on-success="open"
+      />
+      <el-form ref="searchForm" :inline="true" :model="search">
+        <el-form-item label="">
+          <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" icon="search" @click="open">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="media">
+      <div v-for="(item,key) in picList" :key="key" class="media-box">
+        <div class="header-img-box-list">
+          <el-image
+            :key="key"
+            :src="(item.url && item.url.slice(0, 4) !== 'http')?path+item.url:item.url"
+            @click="chooseImg(item.url,target,targetKey)"
+          >
+            <template #error>
+              <div class="header-img-box-list">
+                <el-icon>
+                  <picture />
+                </el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div class="img-title" @click="editFileNameFunc(item)">{{ item.name }}</div>
+      </div>
+    </div>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      :style="{'justify-content':'center'}"
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
+import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+
+const imageUrl = ref('')
+const imageCommon = ref('')
+
+const search = ref({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  open()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  open()
+}
+
+const emit = defineEmits(['enterImg'])
+defineProps({
+  target: {
+    type: Object,
+    default: null,
+  },
+  targetKey: {
+    type: String,
+    default: '',
+  },
+})
+
+const drawer = ref(false)
+const picList = ref([])
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+
+const chooseImg = (url, target, targetKey) => {
+  if (target && targetKey) {
+    target[targetKey] = url
+  }
+  emit('enterImg', url)
+  drawer.value = false
+}
+
+const open = async() => {
+  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
+  if (res.code === 0) {
+    picList.value = res.data.list
+    total.value = res.data.total
+    page.value = res.data.page
+    pageSize.value = res.data.pageSize
+    drawer.value = true
+  }
+}
+
+/**
+ * 编辑文件名或者备注
+ * @param row
+ * @returns {Promise<void>}
+ */
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空',
+    inputValue: row.name
+  }).then(async({ value }) => {
+    row.name = value
+    // console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      open()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    })
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss">
+.upload-btn-media-library {
+  margin-left: 20px;
+}
+
+.media {
+  display: flex;
+  flex-wrap: wrap;
+
+  .media-box {
+    width: 120px;
+    margin-left: 20px;
+
+    .img-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-img-box-list {
+      width: 120px;
+      height: 120px;
+      border: 1px dashed #ccc;
+      border-radius: 8px;
+      text-align: center;
+      line-height: 120px;
+      cursor: pointer;
+      overflow: hidden;
+      .el-image__inner {
+        max-width: 120px;
+        max-height: 120px;
+        vertical-align: middle;
+        width: unset;
+        height: unset;
+      }
+    }
+  }
+}
+
+</style>

src/components/customPic/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <span class="headerAvatar">
+    <template v-if="picType === 'avatar'">
+      <el-avatar v-if="userStore.userInfo.headerImg" :size="30" :src="avatar" />
+      <el-avatar v-else :size="30" :src="noAvatar" />
+    </template>
+    <template v-if="picType === 'img'">
+      <img v-if="userStore.userInfo.headerImg" :src="avatar" class="avatar">
+      <img v-else :src="noAvatar" class="avatar">
+    </template>
+    <template v-if="picType === 'file'">
+      <img :src="file" class="file">
+    </template>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'CustomPic'
+}
+</script>
+
+<script setup>
+import noAvatarPng from '@/assets/noBody.png'
+import { useUserStore } from '@/pinia/modules/user'
+import { computed, ref } from 'vue'
+const props = defineProps({
+  picType: {
+    type: String,
+    required: false,
+    default: 'avatar'
+  },
+  picSrc: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+const noAvatar = ref(noAvatarPng)
+
+const userStore = useUserStore()
+
+const avatar = computed(() => {
+  if (props.picSrc === '') {
+    if (userStore.userInfo.headerImg !== '' && userStore.userInfo.headerImg.slice(0, 4) === 'http') {
+      return userStore.userInfo.headerImg
+    }
+    return path.value + userStore.userInfo.headerImg
+  } else {
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
+    }
+    return path.value + props.picSrc
+  }
+})
+const file = computed(() => {
+  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
+    return path.value + props.picSrc
+  }
+  return props.picSrc
+})
+
+</script>
+
+<style scoped>
+.headerAvatar{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+}
+.file{
+    width: 80px;
+    height: 80px;
+    position: relative;
+}
+</style>

src/components/upload/common.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-upload
+      :action="`${path}/fileUploadAndDownload/upload`"
+      :before-upload="checkFile"
+      :headers="{ 'x-token': userStore.token }"
+      :on-error="uploadError"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
+      class="upload-btn"
+    >
+      <el-button size="small" type="primary">普通上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+
+const emit = defineEmits(['on-success'])
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+const fullscreenLoading = ref(false)
+
+const checkFile = (file) => {
+  fullscreenLoading.value = true
+  const isJPG = file.type === 'image/jpeg'
+  const isPng = file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 0.5
+  if (!isJPG && !isPng) {
+    ElMessage.error('上传图片只能是 jpg或png 格式!')
+    fullscreenLoading.value = false
+  }
+  if (!isLt2M) {
+    ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
+    fullscreenLoading.value = false
+  }
+  return (isPng || isJPG) && isLt2M
+}
+
+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>
+
+<script>
+
+export default {
+  name: 'UploadCommon',
+  methods: {
+
+  }
+}
+</script>

src/components/upload/image.vue

@@ -0,0 +1,104 @@
+
+<template>
+  <div>
+    <el-upload
+      :action="`${path}/fileUploadAndDownload/upload`"
+      :headers="{ 'x-token': userStore.token }"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      :before-upload="beforeImageUpload"
+      :multiple="false"
+    >
+      <el-button size="small" type="primary">压缩上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+import ImageCompress from '@/utils/image'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+
+const emit = defineEmits(['on-success'])
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    default: ''
+  },
+  fileSize: {
+    type: Number,
+    default: 2048 // 2M 超出后执行压缩
+  },
+  maxWH: {
+    type: Number,
+    default: 1920 // 图片长宽上限
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+
+const beforeImageUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg'
+  const isPng = file.type === '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>
+
+<script>
+
+export default {
+  name: 'UploadImage',
+  methods: {
+
+  }
+}
+</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>

src/components/warningBar/warningBar.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="warning-bar"
+    :class="href&&'can-click'"
+    @click="open"
+  >
+    <el-icon>
+      <warning-filled />
+    </el-icon>
+    <span>
+      {{ title }}
+    </span>
+  </div>
+</template>
+<script setup>
+import { WarningFilled } from '@element-plus/icons-vue'
+const prop = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  href: {
+    type: String,
+    default: ''
+  }
+})
+
+const open = () => {
+  if (prop.href) {
+    window.open(prop.href)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.warning-bar{
+    background-color: #FFF5ED;
+    font-size: 14px;
+    padding: 6px 14px;
+    display: flex;
+    align-items: center;
+    border-radius: 2px;
+    .el-icon{
+      font-size: 18px;
+      color: #ED6A0C;
+    }
+    margin-bottom: 12px;
+    span{
+        line-height: 22px;
+        color:#F67207;
+        margin-left: 8px;
+    }
+}
+.can-click{
+  cursor: pointer;
+}
+</style>