添加商品时，报错有点问题

components.d.ts

@@ -7,8 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AllStore: typeof import('./src/components/AllStore.vue')['default']
-    DropFile: typeof import('./src/components/DropFile.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElForm: typeof import('element-plus/es')['ElForm']
@@ -18,11 +16,9 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
     Register: typeof import('./src/components/Register.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SingleStore: typeof import('./src/components/SingleStore.vue')['default']
   }
 }

src/api/product.ts

@@ -1,5 +1,5 @@
 import {axios} from '../utils/request'
-import {PRODUCT_MODULE, STORE_MODULE} from './_prefix'
+import {PRODUCT_MODULE} from './_prefix'
 
 // 创建商店
 export const createProduct = payload => {

src/components/AllStore.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import {getStoreById} from "../api/store.ts";
-import { router } from "../router";
-type StoreList = [
-    {
-        "id": number,
-        "name": string,
-        "logoUrl": string,
-        "rating": number,
-        "number": number,
-        "location": string
-    }
-]
-const storelist:StoreList=[{id:1001, name:'123', logoUrl:'', rating:0, number:0, location:'F4'}]
-
-async function showStore(id:number) {
-    const payload = {id:id}
-
-    getStoreById(payload)
-        .then(res => {
-            console.log(res)
-            const token = res.result
-            localStorage.setItem('token', token)
-            router.push({path:"/singlestore"})
-        })
-}
-    
-</script>
-
-<template>
-    <div class="common-layout">
-      <el-container>
-        <el-header style="background-color: #409EFF; height: auto;"><h1 style="color: white;">商店列表</h1></el-header>
-        <el-main style="width: 80%; margin-left: 10vw">
-            <ul style="list-style: none;">
-                <template v-for="store in storelist" :key="storelist.id">
-                    <li class="item" @click="showStore(store.id)">
-                        <el-container>
-                            <el-aside><el-image :src = "store.logoUrl" style="height: 200px; width: 300px;"></el-image></el-aside>
-                            <el-main style="text-align: left; height: 200px; position: relative;">
-                                <h3 style="text-align: left; margin-top: 0;">商店名称</h3>
-                                <el-space>
-                                    xx个评分
-                                    <el-container>
-                                    <el-icon><Star /></el-icon>
-                                    <el-icon><Star /></el-icon>
-                                    <el-icon><Star /></el-icon>
-                                    <el-icon><Star /></el-icon>
-                                    <el-icon><Star /></el-icon>
-                                    </el-container>
-                                </el-space>
-                                <div style="bottom: 10px; position: absolute;">商店位置</div>
-                            </el-main>
-                        </el-container>
-                    </li>
-                </template>
-            </ul>
-        </el-main>
-      </el-container>
-    </div>
-</template>
-
-<style>
-.item{
-    border: 1px solid black;
-    /*边框合并*/
-    margin:0 0 -1px -1px;
-    position: relative; 
-    z-index: 0;
-}
- 
-.item:hover{
-    border-color: #409EFF;
-    border-width: medium;
-    z-index: 1;
-}
-</style>

src/components/DropFile.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const isDragging = ref(false)
-const files = ref([])
-const fileInputRef = ref(null)
-
-function onChange() {
-  files.value = [...fileInputRef.value.files]
-}
-
-function dragover(e) {
-  e.preventDefault()
-  isDragging.value = true
-}
-
-function dragleave() {
-  isDragging.value = false
-}
-
-function drop(e) {
-  e.preventDefault()
-  fileInputRef.value.files = e.dataTransfer.files
-  onChange()
-  isDragging.value = false
-}
-
-function remove(i) {
-  files.value.splice(i, 1);
-}
-
-function generateURL(file) {
-  let fileSrc = URL.createObjectURL(file);
-  setTimeout(() => {
-    URL.revokeObjectURL(fileSrc);
-  }, 1000);
-  return fileSrc;
-}
-</script>
-
-<template>
-  <div class="main">
-    <div
-        class="dropzone-container"
-        @dragover="dragover"
-        @dragleave="dragleave"
-        @drop="drop"
-    >
-      <input
-          type="file"
-          multiple
-          name="file"
-          id="fileInput"
-          class="hidden-input"
-          @change="onChange"
-          ref="fileInputRef"
-          accept=".pdf,.jpg,.jpeg,.png"
-      />
-
-      <label for="fileInput" class="file-label">
-        <div v-if="isDragging">释放以将文件放到此处。</div>
-        <div v-else>将文件拖到此处或单击此处上传。</div>
-      </label>
-
-      <div class="preview-container mt-4" v-if="files.length">
-        <div v-for="file in files" :key="file.name" class="preview-card">
-          <div>
-            <img class="preview-img" :src="generateURL(file)" />
-            <p>
-              {{ file.name }}
-            </p>
-          </div>
-          <div>
-            <button
-                class="ml-2"
-                type="button"
-                @click="remove(files.indexOf(file))"
-                title="Remove file"
-            >
-              <b>×</b>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(10)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/SingleStore.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-    const url = 'src/assets/img/eg.jpg'
-</script>
-
-<template>
-    <div>
-      <el-container>
-        <el-header>
-          <h1 style="color: white;">XX商店</h1>
-        </el-header>
-          <el-container>
-            <el-aside width="600px">
-              <el-image :src="url" />
-            </el-aside>
-            <el-main>
-              <el-space>
-                xx个评分
-                <el-container>
-                  <el-icon><Star /></el-icon>
-                  <el-icon><Star /></el-icon>
-                  <el-icon><Star /></el-icon>
-                  <el-icon><Star /></el-icon>
-                  <el-icon><Star /></el-icon>
-                </el-container>
-              </el-space>
-            </el-main>
-          </el-container>
-          <el-footer><h2 style="color: white;">地址：</h2></el-footer>
-      </el-container>
-    </div>
-</template>
-
-<style scoped>
-.el-header, .el-footer {
-  max-width: 100%;
-  background-color: #409EFF;
-  height: auto;
-}
-</style>

src/views/staff/CreateProduct.vue

@@ -23,7 +23,12 @@ const files = ref([])
 const fileInputRef = ref(null)
 
 function onChange() {
-  files.value = [...fileInputRef.value.files]
+  files.value.push([...fileInputRef.value.files][0])
+  let formData = new FormData();
+  formData.append('file', [...fileInputRef.value.files][0]);
+  uploadImage(formData).then(res => {
+    photoUrlList.value.push(res.result);
+  });
 }
 
 function dragover(e) {
@@ -43,13 +48,6 @@ function drop(e) {
 }
 
 function generateURL(file) {
-  let formData = new FormData();
-  formData.append('file', file);
-  uploadImage(formData).then(res => {
-    photoUrlList.value.push(res.result);
-    console.log(photoUrlList.value)
-  });
-
   let fileSrc = URL.createObjectURL(file);
   setTimeout(() => {
     URL.revokeObjectURL(fileSrc);
@@ -60,7 +58,7 @@ function generateURL(file) {
 
 function remove(i) {
   files.value.splice(i, 1);
-  console.log(photoUrlList.value)
+  photoUrlList.value.pop();
 }
 
 const createDisabled = computed(() => {
@@ -75,6 +73,7 @@ function handleCreateProduct() {
     price: price.value,
     photoUrlList: photoUrlList.value
   };
+  console.log(payload)
   createProduct(payload).then(res => {
     console.log(res);
   })
@@ -156,10 +155,11 @@ function handleCreateProduct() {
                   <div v-else>将文件拖到此处或单击此处上传。</div>
                 </label>
 
+
                 <div class="preview-container mt-4" v-if="files.length">
                   <div v-for="file in files" :key="file.name" class="preview-card">
                     <div>
-                      <img class="preview-img" :src="generateURL(file)"/>
+                      <el-image class="preview-img" :src="generateURL(file)" />
                       <p>
                         {{ file.name }}
                       </p>
@@ -191,8 +191,6 @@ function handleCreateProduct() {
       </div>
     </el-card>
   </div>
-
-
 </template>
 
 <style scoped>