如何在 Vue 表單中處理圖片

Posted on by

問題：

我在 Vue 中有一個 form 表單，用於上傳博客帖子，它有標題、正文、描述、片段和圖片等范圍。所有的一切都是必需的。我在 Express 中設置瞭一個 API 來處理這個問題。我在 Postman 中測試正常，但是我不知道如何通過瀏覽器將文件發送給數據庫。我一直收到 500 錯誤，並且我將數據打印到控制臺，而圖片字段為空，所以我確信這就是問題所在，但我就是搞不清楚怎麼辦。

這是我前端頁面的 form 表單:

<template>
 <div class="container">
  <div id="nav">
   <adminnav/>
  </div>
  <div id="create">
   <h1>Create new post</h1>
  </div>
  <div id="post">
   <body>
    <form>
     <label for="title">Title: </label>
     <textarea v-model=formdata.title rows="5" cols="60" name="title"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="body">Body: </label>
     <textarea v-model=formdata.body rows="5" cols="60" name="body"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="description">Description: </label>
     <textarea v-model=formdata.description rows="5" cols="60" name="description"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="snippet">Snippet: </label>
     <textarea v-model=formdata.snippet rows="5" cols="60" name="snippet"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="file">Upload photo: </label>
     <input
      class="form-control-file"
      type="file"
      accept="image/*"
      v-bind="formdata.photo"
     />
     <br/>
     <input id="submit" type="submit" value="submit" @click.prevent="createPost()"/>
    </form>
   </body>
  </div>
 </div>
</template>

<script>
import adminnav from '../components/adminnav.vue';
import PostService from '../service/PostService';

export default {
 name: 'createStory',
 components: {
  adminnav,
 },
 data() {
  return {
   formdata: {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: null,
   },
  };
 },
 methods: {
  createPost() {
   console.log(this.formdata);
   /* eslint prefer-destructuring: 0 */
   const formdata = this.formdata;
   PostService.createPost(formdata)
    .then(() => {
     console.log('success');
    });
  },
 },
};
</script>

這是 POST 請求。

router.post("/add-story", upload.single('photo'), async(req, res) => {
 try{
  let post = new Post();
  post.title = req.body.title;
  post.description = req.body.description;
  post.photo = req.file.location;
  post.body = req.body.body;
  post.snippet = req.body.snippet;

  await post.save();

  res.json({
   status: true,
   message: "Successfully saved."
  });

 } catch(err) {
  res.status(500).json({
   success: false,
   message: err.message
  });
 }
});

解決方法

讓我們監視文件 <input> 中的 change 事件。這樣可以確保每次用戶的上傳行為觸發 updatePhoto 方法並把文件數據儲存到 this.photo。

<input type="file" accept="image/*" class="form-control-file"
  @change="updatePhoto($event.target.name, $event.target.files)"
>

編碼去收集所有的數據並發送請求

// vue組件的其他部分
data () {
  return {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: {} // 儲存文件數據
  };
},
methods: {
  updatePhoto (files) {
    if (!files.length) return;

    // 存儲文件數據
    this.photo = {
      name: files[0].name,
      data: files[0]
    };
  },
  createPost() {
    let formData = new FormData();

    formData.append('title', this.title);
    formData.append('body', this.body);
    formData.append('description', this.description);
    formData.append('snippet', this.snippet);
    formData.append('photo', this.photo.data, this.photo.name);

    PostService.createPost(formdata)
    .then(() => {
      console.log('success');
    });
  }
}
// vue組件的其他部分

很明顯，我跳過瞭很多事情，比如整個 vue 組件結構，我相信它與這個問題無關，還有一些確保在啟動請求之前文件數據可用的檢查等等。這是一個關於如何獲取文件數據的想法，所以希望這個答案能啟發您。

以上就是如何在 Vue 表單中處理圖片的詳細內容，更多關於Vue 表單中處理圖片的資料請關註WalkonNet其它相關文章！

推薦閱讀：