问题:

我在 Vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 Express 中设置了一个 API 来处理这个问题。我在 Postman 中测试正常,但是我不知道如何通过浏览器将文件发送给数据库。我一直收到 500 错误,并且我将数据打印到控制台,而图片字段为空,所以我确信这就是问题所在,但我就是搞不清楚怎么办。

这是我前端页面的 form 表单:






这是 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
  });
 }
});

解决方法

让我们监视文件 中的 change 事件。这样可以确保每次用户的上传行为触发 updatePhoto 方法并把文件数据储存到 this.photo

编码去收集所有的数据并发送请求

// 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 表单中处理图片的更多相关文章

  1. vue实现一个获取按键展示快捷键效果的Input组件

    遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改......

  2. vue 页面跳转的实现方式

    一、this.$router.push()1、vue点击跳转4 2、script//跳转前页面传参数:goTo(it......

  3. vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器引入watchimport { ref, reactive, watch, toRefs } f......

  4. vue 组件基础知识总结

    组件基础1 组件的复用组件是可复用的Vue实例。// 定义一个名为 button-counter 的新组件Vue.c......

  5. 如何在 Vue 表单中处理图片

    问题:我在 Vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都......

  6. vue element和nuxt的使用技巧分享

    1.element的时间选择提交的格式转化例如Fri Sep 07 2018 00:00:00 GMT+0800 (......

  7. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析。1.定义作为vue最独特的特性,响应式可......

  8. vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能

    一、准备工作下载vue-quill-editornpm install vue-quill-editor --sav......

  9. vue 递归组件的简单使用示例

    前言递归 相信很多同学已经不陌生了,算法中我们经常用递归来解决问题。比如经典的:从一个全为数字的数组中找出其中相加能......

  10. Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarn add svg-sprite-loader ......

随机推荐

  1. Java中类的定义和初始化示例详解

    类的定义类的定义格式//创建类class ClassName{field ;//成员属性/字段method;//方法......

  2. 爬虫-urllib3模块的使用

    urllib3是一个功能强大,对SAP健全的 HTTP客户端,许多Python生态系统已经使用了urllib3。一、......

  3. sqlserver 实现收缩数据库日志操作

    说明:收缩日志的原因有很多种,有些是考虑空间不足,有些则是应用程序限制导致的。--将“恢复模式”设置为“简单”ALT......

  4. MySQL多版本并发控制——MVCC机制分析

    MVCC,即多版本并发控制(Multi-Version Concurrency Control)指的是,通过版本链维......

  5. Python初学者详细笔认知笔记

    首先编程语言有很多种,类别也比较多,和数学,外语都有很大联系,学编程外语三级以上水平更好一点。编程语言主要可以分为以......

  6. MySQL修改字符集的实战教程

    前言:在 MySQL 中,系统支持诸多字符集,不同字符集之间也略有区别。目前最常用的字符集应该是 utf8 和 ut......

  7. JavaScript 防盗链的原理以及破解方法

    背景前段日子 在自学做项目的时候发现 明明在项目中引用了线上存在的图片 但是在自己的项目中却怎么也显示出来查阅资料后......

  8. Navicat 导出sql文件和导入sql文件

    1.导出sql文件(1)选择需要导出数据库表,右击--->转储为sql文件---->结构和数据(2)会弹......

  9. TCP/IP协议栈在Linux内核中的运行时序分析

    TCP/IP协议栈在Linux内核中的运行时序分析1.网络体系结构模型1.1.OSI七层模型OSI模型是由国际化标准......

  10. java编译命令基础知识点

    我们在对计算机下达指令时,人类的语言它是不能够明白,需要通过编译的时候翻译成计算机能听懂的语言。编译过程中会调用ja......