상품 post formData 로 저장

admin/pages/product.vue

@@ -10,7 +10,7 @@
             <!-- Category DropDown -->
             <div class="a-spacing-top-medium">
               <label for="">Category</label>
-              <select  class="a-select-option">
+              <select  v-model="categoryID" class="a-select-option">
                 <option v-for="category in categories" :key="category._id" :value="category._id">{{ category.type }}</option>
               </select>
             </div>
@@ -18,7 +18,7 @@
             <!-- Owner DropDown -->
             <div class="a-spacing-top-medium">
               <label for="">Owner</label>
-              <select  class="a-select-option">
+              <select v-model="ownerID" class="a-select-option" >
                 <option v-for="owner in owners" :key="owner._id" :value="owner._id">{{ owner.name }}</option>
               </select>
             </div>
@@ -26,19 +26,26 @@
             <!-- Title input-->
             <div class="a-spacing-top-medium">
               <label for="" style="margin-bottom: 0px;">Title</label>
-              <input type="text" class="a-input-text" style="width: 100%"/>
+              <input v-model="title" type="text" class="a-input-text" style="width: 100%"/>
             </div>
 
+            <!-- stockQuantity input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">stockQuantity</label>
+              <input v-model="stockQuantity" type="number" class="a-input-text" style="width: 100%"/>
+            </div>
+
+
             <!-- Price input-->
             <div class="a-spacing-top-medium">
               <label for="" style="margin-bottom: 0px;">Price</label>
-              <input type="number" class="a-input-text" style="width: 100%"/>
+              <input v-model="price" type="number" class="a-input-text" style="width: 100%"/>
             </div>
 
             <!-- Description input-->
             <div class="a-spacing-top-medium">
               <label for="" style="margin-bottom: 0px;">Description</label>
-              <textarea placeholder="Provide details product description" style="width: 100%"></textarea>
+              <textarea v-model="description" placeholder="Provide details product description" style="width: 100%"></textarea>
             </div>
 
             <!-- Photo input-->
@@ -47,8 +54,8 @@
               <div class="a-row a-spacing-top-medium">
                 <label class="choosefile-button">
                   <i class="fa fa-plus"></i>
-                  <input type="file" />
-                  <p style="margin-top: -70px">name of the</p>
+                  <input @change="onFileSelected" type="file" />
+                  <p style="margin-top: -70px">{{ fileName }}</p>
                 </label>
               </div>
             </div>
@@ -85,6 +92,42 @@ export default {
     } catch (err) {
       console.log(err)
     }
+  },
+
+  data () {
+    return {
+      categoryID: null,
+      ownerID: null,
+      title: '',
+      price: 0,
+      description: '',
+      selectedFile: null,
+      fileName: '',
+      stockQuantity: 1
+    }
+  },
+
+  methods: {
+    onFileSelected (event) {
+      this.selectedFile = event.target.files[0]
+      console.log(this.selectedFile)
+      this.fileName = event.target.files[0].name
+    },
+
+    async onAddProduct () {
+      let data = new FormData()
+      data.append('title', this.title)
+      data.append('price', this.price)
+      data.append('stockQuantity', this.stockQuantity)
+      data.append('description', this.description)
+      data.append('ownerID', this.ownerID)
+      data.append('categoryID', this.categoryID)
+      data.append('photo', this.selectedFile, this.selectedFile.name)
+
+      let result = await this.$axios.$post('http://localhost:3000/api/products', data)
+
+      this.$router.push('/')
+    }
   }
 }
 </script>

server/package-lock.json

@@ -171,6 +171,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

server/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "aws-sdk": "^2.596.0",
     "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "mongoose": "^5.8.3",

server/routes/products.js

@@ -5,6 +5,9 @@ const upload = require('../middlewares/upload-photo')
 router.post('/products', upload.single('photo'), async (req, res)=> {
   try {
     let product = new Product()
+    product.ownerID = req.body.ownerID
+    product.categoryID = req.body.categoryID
+    product.price = req.body.price
     product.title = req.body.title
     product.description = req.body.description
     product.photo = req.file.location