Springboot+Ajax上传并预览头像

一时失言乱红尘 2023-07-01 08:32 33阅读 0赞

## 一.效果: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200119224652719.png]

## 二.前端代码: ##

1.表单上加上`enctype="multipart/form-data"`,表示此表单上传包含文件.

2.img显示并预览上传的头像,input上传头像控件,`type="file"`

上传按钮样式修改css

.btn-upload { 
        position: relative;
        display: inline-block;
        height: 31px;
        *display: inline;
        overflow: hidden;
        vertical-align: middle;
        cursor: pointer
    }
    
    .input-file { 
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 1;
        font-size: 30em;
        opacity: 0;
        filter: alpha(opacity=0)
    }

3.利用js预览上传的图片

//预览上传的头像
        $("#head_picture_file").change(function (e) { 
            var reader = new FileReader();
            file = e.target.files[0];
            if (!/image\/\w+/.test(file.type)) { //判断文件的是不是图片
                alert("上传的文件格式不对,请重新上传...");
                return false;
            }
            reader.readAsDataURL(file);
            reader.onload = function (e) { 
                $("#head_picture").attr("src", "" + this.result + "");
            };
        });

4.ajax上传带文件的表单

## 后端代码: ##

0.导入pom文件:

<dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.2.2</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>

1.方法的形参中:`@RequestParam(value = "file", required = false) MultipartFile file`,我们上传了文件file对象就会存在而不是为空.

2.将MultipartFile对象存在项目的静态目录下,我存在`C:\src\idea\SDJUBBS\src\main\resources\static\common\images\avatar`

public static String saveFile(MultipartFile filedata, String pathval) { 
            File fileDir = new File(pathval);
            if (!fileDir.exists()) { 
                fileDir.mkdirs();
            }
            // 上传的文件名
            String filename = System.currentTimeMillis() + "_" + filedata.getOriginalFilename();
            // 总的文件路径
            String filePath = pathval + "/" + filename;
            File file = new File(System.getProperty("user.dir") + "/" + filePath);
            try { 
                FileOutputStream out = new FileOutputStream(file);
                // 写入文件
                out.write(filedata.getBytes());
                out.flush();
                out.close();
                return filePath;// 返回图片保存路径
            } catch (Exception e) { 
                e.printStackTrace();
            }
            return null;
        }
    }

将上传的文件保存在服务器,然后将照片的路径返回即可.

**注意:****这里有个问题也是很多人遇到不知道如何解决的:上传文件到项目中,项目中确实也看到了上传的文件,可前端访问文件就是404,需要重启项目,才能访问的到.**

### 解决办法: ###

造成这种现象的原因是tomcat服务器对静态资源的一种保护措施,你访问的虚拟路径没有映射到实际的位置,需要自己配置.

package com.selenium.sdjubbs.common.config;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class ResourceConfig extends WebMvcConfigurerAdapter { 
        @Autowired
    private SdjubbsSetting setting;
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            //前面是映射后的地址，后面是需要映射的地址
            //获取文件的真实路径
            String path = System.getProperty("user.dir") + setting.getBaseDirSavePath();
            //映射到/static/common/下的所有文件
            registry.addResourceHandler("/common/**").
            addResourceLocations("file:" + path);
            super.addResourceHandlers(registry);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200119224550515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200119224629539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2,size_16,color_FFFFFF,t_70
[20200119224652719.png]: https://img-blog.csdnimg.cn/20200119224652719.png