如何在 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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
解决vue中provide inject的响应式监听
Apr 19 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实现将Session写入数据库
2015/07/26 PHP
php创建无限级树型菜单
2015/11/05 PHP
php加密解密字符串示例
2016/10/13 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python逐行读取文件内容的三种方法
2014/01/20 Python
跟老齐学Python之复习if语句
2014/10/02 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python中的for循环
2018/09/28 Python
python制作抖音代码舞
2019/04/07 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
升旗仪式主持词
2014/03/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
校企合作协议书
2014/04/16 职场文书
报到证办理个人委托书
2014/10/06 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
在Django中使用MQTT的方法
2021/05/10 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL