添加产品图片

src/views/commodityManage/components/addSpecifications.vue

@@ -10,6 +10,15 @@
             <el-form-item label="商品货品名称" prop="productName">
                 <el-input v-model="formData.productName" />
             </el-form-item>
+            <el-form-item label="产品图片" prop="url">
+                <el-upload :action="uploadPath" :limit="1" :show-file-list="false" :headers="headers"
+                    :on-success="uploadUrl" list-type="picture" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
+                    <img v-if="formData.url" :src="formData.url" class="avatar" />
+                    <el-icon v-else class="avatar-uploader-icon">
+                        <Plus />
+                    </el-icon>
+                </el-upload>
+            </el-form-item>
         </el-form>
         <template #footer class="dialog-footer">
             <el-button @click="handleClose">取消</el-button>
@@ -19,7 +28,8 @@
 </template>
 
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { uploadPath } from "@/services/api/storage";
 
 let emits = defineEmits(['clickAdd', 'clickEdit'])
 let showVisiable = ref(false)
@@ -29,13 +39,23 @@ let rules = ref({
     bomCode: { required: true, message: '', trigger: 'blur' },
     model: { required: true, message: '', trigger: 'blur' },
     productName: { required: true, message: '', trigger: 'blur' },
+    url: { required: true, message: '产品图片不为空', trigger: ['blur', 'change'] }
 })
 let formData = ref({
     bomCode: '',
     model: '',
-    productName: ''
+    productName: '',
+    url: ''
 })
 
+let headers = computed(() => {
+    return { Authorization: sessionStorage.getItem("token") };
+});
+
+let uploadUrl = (res: any) => {
+    formData.value.url = res.data.url;
+}
+
 let handleAdd = () => {
     formRef.value?.validate((valid: boolean) => {
         if (valid) {
@@ -54,7 +74,8 @@ let handleClose = () => {
     formData.value = {
         bomCode: '',
         model: '',
-        productName: ''
+        productName: '',
+        url: ''
     }
     showVisiable.value = false
 }

src/views/commodityManage/edit.vue

@@ -314,7 +314,7 @@ let init = (id: number) => {
                 keywords.value = keyword.split(",");
             }
         }
-        console.log(goods.value, 'data');
+        // console.log(goods.value, 'data');
     });
 
     listCatAndBrand().then((res: any) => {
@@ -491,7 +491,7 @@ let handleEdit = () => {
                         })
                 })
             }
-            console.log(products.value, 'products.value');
+            // console.log(products.value, 'products.value');
             specifications.value = [...specificationsDeleteData.value, ...specifications.value]
             const finalGoods = {
                 goods: goods.value,