如何在 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 的 v-model用法实例
Nov 23 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python ddt实现数据驱动
2018/03/14 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python 命令行传入参数实现解析
2019/08/30 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
水电站项目建议书
2014/05/12 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
工程部文员岗位职责
2015/02/04 职场文书
python编写五子棋游戏
2021/05/25 Python
Python上下文管理器Content Manager
2021/06/26 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android