vue+axios使用(form/json)传参,后端SpringBoot接受

本文详细介绍了如何使用Vue和Axios以form表单和JSON格式向前端发送数据,以及SpringBoot如何接收这两种格式的数据。通过具体示例,展示了从前端构造请求到后端处理请求的完整流程。

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

今天用到了前后端数据传输所以记录一下
前端向后端传输数据形式总共分为两种,Form表单形式和JSON格式
下面举例说明

一、前端axios传参
//传递的数据
data() {
    return {
        loginForm: {
            username: '',
            password: '',
        },
    }
},
1、form表单形式
import Qs from 'qs'
//(如果只是get请求就不需要引qs)

this.$axios({
  		 headers: {
	         'Content-Type': 'application/x-www-form-urlencoded'
	     },
	     method: 'post',
	     url: '/login',
	     data: Qs.stringify(this.loginForm)
 	 })
	 .then(
	     successResponse => {
	     if (successResponse.data.code === 200) {
	         this.$router.replace({path: '/index'})
	     }else{
	         console.log("账号或密码错误");
	         this.loginForm.message="账号或密码错误";
	     }
	 })
	 .catch(failResponse => {
	 })
2.1、JSON形式(1)
this.$axios({
         headers: {
              'Content-Type': 'application/json;'
          },
          method: 'post',
          url: '/login',
          transformRequest: [function (data) {
          // 对 data 进行任意转换处理
          return JSON.stringify(data);
          }],
          data: this.loginForm
      })
      .then(
          successResponse => {
          if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
          }else{
              console.log("账号或密码错误");
              this.loginForm.message="账号或密码错误";
          }
      })
      .catch(failResponse => {
      })
2.2JSON形式(2)
//简化形式
this.$axios
    .post('/login', {
         username: this.loginForm.username,
         password: this.loginForm.password,
     })
     .then(
         successResponse => {
         if (successResponse.data.code === 200) {
             this.$router.replace({path: '/index'})
         }else{
             console.log("账号或密码错误");
             this.loginForm.message="账号或密码错误";
         }
     })
     .catch(failResponse => {
     })
二、后端接受数据
1、接受form表单数据
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestParam Map<String,Object> reqMap, Model model) {
        String username=reqMap.get("username").toString();
        String password=reqMap.get("password").toString();
        System.out.println(username+":"+password);
        if (!Objects.equals("admin", username) || !Objects.equals("123", password)) {
            System.out.println("账号密码错误");
            return new Result(400);
        } else {
            System.out.println("登录成功");
            return new Result(200);
        }
    }
2、接受JSON数据
 	@PostMapping(value = "api/login")
    @ResponseBody
    //user是一个bean类
    public Result login(@RequestBody User requestUser) {
        System.out.println(requestUser);
        // 对 html 标签进行转义,防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);
        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            System.out.println("账号密码错误");
            return new Result(400);
        } else {
            System.out.println("登录成功");
            return new Result(200);
        }
    }
<think>嗯,用户想要了解如何使用VueAxios实现前端上图片并将图片后端保存。首先,我需要理清楚整个流程,从前端到后端的步骤。可能需要分步骤讲解,这样用户更容易理解。 首先,前端部分使用VueAxios。用户可能已经有一定的Vue基础,但可能需要具体的代码示例。上图片通常会用<input type="file">元素,或者Vue的组件库如Element UI的上组件。不过为了通用性,可能先介绍原生的input方法,再提到组件库。 然后,处理文件选择的事件。需要用到FileReader来预览图片,这部分可能需要讲解如何将文件读取为DataURL,并在页面上显示预览图。同时,要获取用户选择的文件对象,通常通过event.target.files[0]获取。 接下来是使用Axios发送POST请求。这里需要注意设置Content-Type为multipart/form-data,因为要上文件。FormData对象是关键,需要将文件添加到FormData中,然后通过Axios发送。可能需要提醒用户关于后端接收的方式,比如在Node.js中使用multer中间件,或者在Spring Boot中使用MultipartFile。 然后,后端部分可能需要简要说明如何接收文件。比如Node.js Express的例子,使用multer处理上的文件,保存到指定目录。或者Python Flask的例子,用request.files获取文件对象并保存。这部分虽然用户主要问前端,但提供后端示例会更全面。 另外,需要注意的一些常见问题,比如文件大小限制、跨域问题、安全性(比如文件名处理,防止覆盖)、上进度提示等。可能用户在实际操作中会遇到这些问题,提前说明会有帮助。 可能需要检查用户是否了解前后端的基本交互,比如RESTful API的设计,接口的对接。如果用户是初学者,可能需要更详细的步骤,比如安装Axios,配置Vue组件等。 另外,代码示例的准确性很重要。比如在Vue中,data里应该定义对应的属性,如imageFilepreviewImage。方法里正确绑定事件处理函数,确保FormData正确构建。Axios的请求URL需要根据实际情况修改,提醒用户替换成自己的后端接口。 还有,错误处理部分,比如网络请求失败时的catch块,或者后端返回错误时的处理。这能提升用户体验,用户可能需要知道如何添加提示信息。 总结一下,步骤大概是: 1. 前端创建文件上输入,处理文件选择事件,预览图片。 2. 使用Axios发送FormData后端。 3. 后端接收并保存文件。 4. 处理可能的错误优化点。 需要确保每个步骤的代码示例正确,语法正确,比如Vue的methods、data绑定,Axios的POST请求配置。同时,提醒用户关于安全性性能的问题,比如限制上文件类型大小,避免服务器存储过多大文件。 可能还需要提到如何获取上后的文件路径,比如返回文件的URL给前端,或者保存到数据库等后续操作。不过用户的问题主要集中在保存,所以可能不需要深入这部分。 最后,检查是否有遗漏的细节,比如CORS设置,或者是否需要身份验证,但可能超出当前问题的范围,可以简要提及。</think>以下是通过 Vue.js + Axios 实现图片上的详细步骤指南: --- ### 一、前端实现(Vue + Axios) #### 1. 创建文件上组件 ```html <template> <div> <!-- 文件选择控件 --> <input type="file" @change="handleFileUpload" accept="image/*"> <!-- 图片预览 --> <img v-if="previewImage" :src="previewImage" alt="预览" style="max-width: 300px"> <!--按钮 --> <button @click="uploadImage">上图片</button> </div> </template> ``` #### 2. 脚本部分 ```javascript <script> import axios from 'axios'; export default { data() { return { imageFile: null, // 存储选择的文件对象 previewImage: null // 存储预览图的Base64数据 }; }, methods: { // 处理文件选择 handleFileUpload(event) { const file = event.target.files[0]; if (file) { this.imageFile = file; // 生成预览图 const reader = new FileReader(); reader.onload = (e) => { this.previewImage = e.target.result; }; reader.readAsDataURL(file); } }, // 上图片 async uploadImage() { if (!this.imageFile) { alert('请先选择图片'); return; } const formData = new FormData(); formData.append('image', this.imageFile); // 后端接收的字段名需保持一致 try { const response = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' // 必须设置请求头 } }); console.log('上成功:', response.data); alert('上成功!'); } catch (error) { console.error('上失败:', error); alert('上失败,请重试'); } } } }; </script> ``` --- ### 二、后端实现(示例) #### 1. Node.js (Express + Multer) ```javascript const express = require('express'); const multer = require('multer'); const app = express(); // 配置存储路径文件名 const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); // 图片保存目录 }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); // 防止文件名冲突 } }); const upload = multer({ storage }); // 处理上请求 app.post('/api/upload', upload.single('image'), (req, res) => { if (!req.file) { return res.status(400).send('未接收到文件'); } res.json({ message: '文件上成功', path: req.file.path // 返回文件存储路径 }); }); app.listen(3000, () => console.log('服务器已启动')); ``` #### 2. Python (Flask) ```python from flask import Flask, request, jsonify from werkzeug.utils import secure_filename import os app = Flask(__name__) UPLOAD_FOLDER = 'uploads' app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER @app.route('/api/upload', methods=['POST']) def upload_file(): if 'image' not in request.files: return jsonify({'error': 'No file part'}), 400 file = request.files['image'] if file.filename == '': return jsonify({'error': 'No selected file'}), 400 if file: filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return jsonify({'message': 'File uploaded successfully', 'path': filename}) if __name__ == '__main__': app.run(port=5000) ``` --- ### 三、关键注意事项 1. **跨域问题** 后端需配置 CORS,如 Node.js 使用 `cors` 中间件: ```javascript const cors = require('cors'); app.use(cors()); ``` 2. **文件大小限制** - Axios 配置:`axios.post(url, formData, { maxContentLength: 10000000 })` - Node.js Multer 配置: ```javascript const upload = multer({ limits: { fileSize: 10 * 1024 * 1024 } // 限制10MB }); ``` 3. **安全建议** - 校验文件类型(通过 MIME 类型或文件扩展名) ```javascript if (!file.mimetype.startsWith('image/')) { return res.status(400).send('仅允许上图片'); } ``` --- ### 四、扩展功能 1. **多文件上** - 前端:修改 `<input>` 添加 `multiple` 属性 - 后端使用 `upload.array('images', 5)`(最多5个文件) 2. **进度条显示** ```javascript axios.post('/api/upload', formData, { onUploadProgress: (progressEvent) => { const percent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(`上进度:${percent}%`); } }); ``` --- 通过以上步骤,您可以实现完整的图片上功能。实际开发中请根据具体框架调整代码,并添加必要的错误处理用户反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南方-D

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值