前端页面改造基本完成 待优化

web/src/components/upload/image.vue

@@ -14,17 +14,15 @@
   </div>
 </template>
 
-<script>
-const path = import.meta.env.VITE_BASE_API
-import { mapGetters } from 'vuex'
+<script setup>
 import ImageCompress from '@/utils/image'
-export default {
-  name: 'UploadImage',
-  model: {
-    prop: 'imageUrl',
-    event: 'change'
-  },
-  props: {
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+const store = useStore()
+
+const emit = defineEmits(['on-success'])
+const props = defineProps({
     imageUrl: {
       type: String,
       default: ''
@@ -37,43 +35,45 @@ export default {
       type: Number,
       default: 1920 // 图片长宽上限
     }
-  },
-  data() {
-    return {
-      path: path
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token']),
-    showImageUrl() {
-      return (this.imageUrl && this.imageUrl.slice(0, 4) !== 'http') ? path + this.imageUrl : this.imageUrl
-    }
-  },
-  methods: {
-    beforeImageUpload(file) {
+  })
+
+
+const path = ref(import.meta.env.VITE_BASE_API)
+const token = computed(()=>store.getters['user/token'])
+const showImageUrl = computed(()=>(props.imageUrl && props.imageUrl.slice(0, 4) !== 'http') ? path.value + props.imageUrl : props.imageUrl)
+
+const beforeImageUpload = (file) => {
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
       if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 jpg或png 格式!')
+        ElMessage.error('上传头像图片只能是 jpg或png 格式!')
         return false
       }
 
-      const isRightSize = file.size / 1024 < this.fileSize
+      const isRightSize = file.size / 1024 < props.fileSize
       if (!isRightSize) {
         // 压缩
-        const compress = new ImageCompress(file, this.fileSize, this.maxWH)
+        const compress = new ImageCompress(file, props.fileSize, props.maxWH)
         return compress.compress()
       }
       return isRightSize
-    },
-    handleImageSuccess(res) {
-      // this.imageUrl = URL.createObjectURL(file.raw);
+    }
+
+    const handleImageSuccess = (res) => {
       const { data } = res
       if (data.file) {
-        this.$emit('change', data.file.url)
-        this.$emit('on-success')
+        emit('on-success',data.file.url)
       }
     }
+
+</script>
+
+<script>
+
+export default {
+  name: 'UploadImage',
+  methods: {
+    
   }
 }
 </script>