Vue+SpringBoot实现前端向 后端发送图片的功能

一、问题来源

在学习讯飞开放平台中的文字识别的时候，需要将图片传递给后端来实现对图片中文字的识别，但是由于没了解过图片的发送导致我在这个问题上停留了许久。

二、解决方案

从解决方法中我分为前端和后端来介绍我发送文件的方式

1.前端

使用FormData来存储相关信息，因为图片的传输用post那么简单的post方式

axios.post('url',参数).then(response=>{});

型式如同上面的方式要注意的就是我们的数据可能会因为过大导致出现问题

我们使用FormData来存储文件用post发送这是图片也是其他大文件的发送方式

<template>
        <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          action=""
          accept=".jpg.png"
          :limit="1"
          :auto-upload="false"
          :on-change="getFile"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleUploadRemove"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip">只能上传jpg/png文件，且不超过5Mb</div>
        </el-upload>
        <el-button size="large" type="primary" class="upload-demo-but" @click="submit" >开始进行识别</el-button>
  </template>
  
<script>
  import axios from 'axios'
  const formData = new FormData()  //注意点1
  export default {
    methods:{
    getFile(file) {         //注意点2
      formData.append('file',file.raw);
    },
     
    submit() {      //注意点3
      axios({
        method: 'post',
        url: '你的后端地址',
        data: formData,
        headers: {
                'Content-Type': 'multipart/form-data'
              }
      }).then(response=>{
      
      })
     
  </script>

我们关心提交函数其他的可以不用关注

我把关键的分为了三个注意点。

第一个注意点：你得创建一个FormData变量这个变量按照我们理解他的使用方法就是相当于java中的Map。这是你发送数据必有得

第二个注意点：其中这个getFile是什么你可以参考element plus中的upload中的文档了解。这里不做阐述，其中重要的就是给FormData添加元素，他也是添加一个键值对的方式在我理解看来。其中第一个元素相当于Key他的名称很重要。要记住后面还会使用。第二个元素相当于value存储的是数据，其中由于element 中的upload对文件进行了处理，file.raw可以理解为文件。

第三个注意点就是发送的axios了这就是常规的版子，套就可以了

这是前端

2.后端

后端主要就是Controller的问题了

import lombok.extern.slf4j.Slf4j;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@Slf4j
@RestController
public class ImageController {

    @PostMapping ("URL")   //注意点1
    public Result WordRecognize(@RequestParam("file") MultipartFile file)throws Exception{                          //注意点2
        if(file!=null){
            String file_name = file.getOriginalFilename();
            System.out.println(file_name);
            return Result.success(stringBuilder.toString());
        }else {
            return Result.error("error");
        }
    }

}

其中也是有两个注意点

第一个注意点：自然就是你的后端地址了

第二个注意点：@RequestParam中的问题了，其中@RequestParam("file")中的file你可以理解为我们前端发送过来的FormData中的Key值了，他要把value传递给后面的MultipartFile file，那么自然你的Key值一定要和前端中的FormData保持一致了。这也是部分代码会出现错误的原因

方法WordRecognize中的方法体看个人情况和网站安全性来设置了

解释： Result 为我自己创建的结果返回的实体类，你可以设置为任意的返回值只要你愿意

        MultipartFile 这个你可以理解为java设置的特殊的实体类，使用方法网上都很多可以查询。

3.其他配置

这个对于前端来说配置的东西不多，主要在后端

后端你得配置这个是在

spring.servlet.multipart.max-file-size = 50MB
spring.servlet.multipart.max-request-size = 50MB
server.tomcat.max-swallow-size = -1

这是设置spring中可以接收的文件的大小的。第三行的含义就是接收无上限的文件大小，其他的具体的我就理解的不太够，但是码友你想深究的话可以根据这些代码去搜索。这基本上传个图片是够了。

你在你的pom.xml文件中配置，这是maven的按其groupId自然可以查询到其他的。

        <!-- 文件上传组件 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
<!--       Json处理工具-->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.11.0</version>
        </dependency>
    </dependencies>

如果有什么问题或者不清晰的地方可以发在评论区里。欢迎指正批评