如何在 Vue 表单中处理图片


Posted in Vue.js onJanuary 26, 2021

问题:

我在 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.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
vue keep-alive的简单总结
Jan 25 #Vue.js
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
Python安装依赖(包)模块方法详解
2020/02/14 Python
html5 标签
2009/07/16 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
军训心得体会
2013/12/31 职场文书
四好少年事迹材料
2014/01/12 职场文书
学生周末长期请假条
2014/02/15 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
北京导游词
2015/02/12 职场文书
实践论读书笔记
2015/06/29 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python