如何在 Vue 表单中处理图片

问题：@H_406_1@

我在 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 表单中处理图片的资料请关注其它相关文章！

• vue+elementUI实现表单和图片上传及验证功能示例
• vue axios 表单提交上传图片的实例
• 使用vue构建一个上传图片表单

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！