Add upload (#1016)

* [style] 修改右上角图标，选择统一风格的iconfont

* [fix] fix webfont tree in readme file

* (fix) 菜单编辑的时候，icon不居中

* 更新为使用组件

* 媒体库增加 普通上传、压缩上传按钮，方便媒体库直接上传图片

* 普通上传组件

* 增加数据类型切换后的的校验，避免使用错误的查询条件和字典条件。

Co-authored-by: bypanghu <bypanghu@163.com>
Co-authored-by: tesun <36953434+tesun@users.noreply.github.com>

web/src/components/chooseImg/index.vue

@@ -1,5 +1,19 @@
 <template>
   <el-drawer v-model="drawer" 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"
+      />
+    </div>
     <div class="media">
       <el-image
         v-for="(item,key) in picList"
@@ -21,6 +35,11 @@
 <script setup>
 import { ref } from 'vue'
 import { getFileList } from '@/api/fileUploadAndDownload'
+import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
+
+const imageUrl = ref('')
+const imageCommon = ref('')
 
 const emit = defineEmits(['enterImg'])
 defineProps({
@@ -56,6 +75,7 @@ defineExpose({ open })
 </script>
 
 <style lang="scss">
+.upload-btn-media-library{margin-left: 20px;}
 .media{
   display:flex;
   flex-wrap:wrap;

web/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>