前端向后台（SSM框架）传一张图片，看这一篇就够了

1.前提引入

       1.1项目背景 

       1.2问题引入

2.问题解决

       2.1后端解决

       2.2Postman测试解决

       2.3前端解决

3.总结

1.前提引入

       1.1项目背景：暑假在家，老师希望我们能构想一下自己的毕业设计。我想做个校园论坛，但老师说太简单了，所以我自己想要添加一个智能认证身份的功能。如上传一张校园卡图片，识别出你是否是学生。

        2.2问题引入：为了实现智能认证身份，第一步就是获取到前端的图片。但是写好了代码以后，一直无法把图片传给后端。由于前端与后端都是自己写的，一时间都不知道是前端还是后端错了。在听取了他人意见用Postman先测试后端有没有用后，才发现了问题的关键。

2.问题解决

        2.1后端解决：在用Postman测试后，我发现后台接口出现了问题。看了好多篇文章，都说需要使用MultipartFile来接收前端传来的文件，这一点是没有错的，然而，此时会发现前台传来的数据一直是空的

       这是由于后台这时没有处理文件的能力，这句话大家必须知道。因为你的后台根本就没有接收图片的能力，所以你再怎么修改前端代码都是无用功，最离谱的是，这里不会给你报错，只是接收的数据一直为空。要想解决这一问题，就需要添加以下配置：

    //设置后台可以接收前端传来的图片
    @Bean
    public CommonsMultipartResolver multipartResolver() {
        CommonsMultipartResolver resolver = new CommonsMultipartResolver();
        resolver.setMaxUploadSize(10485760); // 设置最大上传文件大小，单位是字节
        return resolver;
    }

       但需要注意的是，这个位置需要导入两个java包，如果你没有，好像就会报无法工厂实例化这个错误。同时，我这对应的用java类来做配置文件，你把这写在SpringMvcConfig（或许你的配置文件不叫这个名字）中就可以了。但如果你是使用.xml文件来做配置文件时，你可以去网上搜一下相关的配置，这都是很容易搜集到的。注意的是，如果你使用maven的话，一定要在你的pom.xml文件下配置以下内容

        

    <!-- 文件上传组件 -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.7</version>
    </dependency>

       这里的这两个包一个都不要少，如果下载速度很慢，自己去检查镜像有没有配置。

       2.2Postman测试解决：在做完以上的配置后，后台就算是配置好了。接下来测试一下，注意：前端传送一张图片，需要用POST方法，并且要选择form-data进行参数的传递。如下图：

 

         其中，参数avatar就是我们要传入的图片了。点击发送后，如果出现下图：

        这里，将前端图片的名字打印了出来。就证明你已经拿到了前端传来的图片，后台是没有问题的。接下来再写前端就好了。

        2.3前端解决：在确认后台接口无误后，我们就开始编写前端。同上诉所说一样，请求方式用POST，注意注意，请求数据的格式要是multipart/form-data。这一点是很多人容易忽视的。具体的代码如下

        

<form action="http://localhost:80/user/avatar" method="POST" enctype="multipart/form-data">
            <div>
                <div>
                    <span>邮箱</span>
                </div>
                <input type="email" name="email">
            </div>
            <div>
                <div>
                    <span>请选择头像</span>
                </div>
                <img src="http://localhost:80/imgages/a.jpg">
                <input type="file" name="avatar" required>
            </div>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
</form>

         这里规定了传送过去的数据格式与方法，至此，就能完整的从前台传送一张图片到后端了。

3.总结：

        在解决这个问题的时候，大概思路我其实已经讲到了。对前端而已，你要确保自己传送的数据格式与方法是正确的。对后端而言，你要确保自己有接收前端图片的功能。同时，大家在看我的代码时，照搬着写肯定还会遇到许多问题，希望大家要养成自己解决问题的习惯，不懂的也可以发评论区一起交流。