ssm+vue 前后台分离之前端图片上传到后台

最新推荐文章于 2025-07-24 17:19:29 发布

原创

最新推荐文章于 2025-07-24 17:19:29 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何在SSM（Spring、SpringMVC、MyBatis）和Vue结合的前后端分离项目中，实现前端图片上传到后台的详细步骤，包括后端服务的处理和前端的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>

 <div class="hello">

 <h1>{
  
  { msg }}</h1>

 <form>

  <input type="file" @change="getFile($event)">

  <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>

 </form>

 </div>

</template>

<script>

 import axios from 'axios';

 export default {

 name: 'HelloWorld',

 data() {

  return {

  msg: 'Welcome to Your Vue.js App',

  file: ''

  }

 },

 methods: {

  getFile: function (event) {

  this.file = event.target.files[0];

  console.log(this.file);

  },

  submit: function (event) {

  //阻止元素发生默认的行为

  event.preventDefault();

  let formData = new FormData();

  formData.append("file", this.file);

   formData.append("goodsName", "nihao");  

  axios.post('/front/api/acceptShops/addAcceptShops', formData)

   .then(function (response) {

   alert(response.data);

   console.log(response);

   window.location.reload();

   })

   .catch(function (error) {

   alert("上传失败");

   console.log(error);

   window.location.reload();

   });

  }

 }

 }

</script>