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