SpringMVC_上传文件(Form形式和ajax形式)

- SpringMVC_上传文件(Form形式和ajax形式)

1. 上传文件前的配置

1.1 导入依赖

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
</dependency>

1.2 配置文件application.properties(非必需)

配置一个本地的目录作为上传文件的目录,并将给该目录配置一个对外暴露的访问路径

如: d:/temp/1.jpg 可以用http://localhost:8080/upload/1.jpg 访问到

#静态资源对外暴露的访问路径
file.staticAccessPath=/upload/
#文件上传目录（注意Linux和Windows上的目录结构不同）
file.uploadFolder=D://temp/
#上传文件最大大小
web.upload.maxUploadSize=10485760

1.3 配置spring-mvc.xml

• 配置上传文件的beanmultipartResolver,

• 配置静态资源路径相关的内容

<!-- 加载配置属性文件 -->
<context:property-placeholder ignore-unresolvable="true" 
                              location="classpath:application.properties"/>
<!--上传文件设置,最大文件大小10M=10*1024*1024-->
<bean id="multipartResolver" 
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="${web.upload.maxUploadSize}"/>
</bean>
<!--session拦截器 如果有拦截器的情况下,看情况是否要将配置的静态资源路径加进来-->
<mvc:interceptors>
    <mvc:interceptor>
        <mvc:mapping path="/**"/>
        <mvc:exclude-mapping path="/login"/>
        <mvc:exclude-mapping path="/static/**"/>
        <mvc:exclude-mapping path="${file.staticAccessPath}/**"/>
        <bean class="com.min.spring.interceptor.SessionInterceptor"/>
    </mvc:interceptor>
</mvc:interceptors>
<!-- 配置静态资源映射 -->
<mvc:resources mapping="/static/**" location="/static/" cache-period="31536000"/>
<mvc:resources mapping="${file.staticAccessPath}/**" 
               location="file:${file.uploadFolder}" cache-period="31536000"/>

1.4 后端java代码

接口接收和保存文件

@Controller
@PropertySource("classpath:application.properties")
public class UploadController {

    @Value("${file.uploadFolder}")
    private String uploadFolder;  //文件保存绝对路径

    @Value("${file.staticAccessPath}")
    private String staticAccessPath; //文件的静态路径

    @ResponseBody
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public R upload(MultipartFile file, HttpServletRequest request){
        Map<String, Object> map = new HashMap<>();
        //获取当前服务的目录,不需要了.如果需要放到前项目的目录下,可以用下面的方式获取路径.不需要另外配置文件的保存路径.
        //String path = request.getSession().getServletContext().getRealPath("/");

        //目录不存在这创建
        File folder= new File(uploadFolder);
        if (!folder.exists()) {
            folder.mkdir();
        }
        //获取文件后缀
        String fileExt;
        String fileName = file.getOriginalFilename();
        String[] filesplit = fileName.split("\\.");
        if (filesplit.length>1){
            fileExt = filesplit[filesplit.length - 1];
        }else{
            return R.error(-1, "上传失败，文件名有问题");
        }
        //文件名生成,可以用UUID等方法来实现,这里使用雪花算法
        String newfilename= SnowflakeUtils.genId() +  "." + fileExt;
        //将文件写入目标
        File newFile = new File(folder ,newfilename);
        try {
            file.transferTo(newFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return R.ok(staticAccessPath+newfilename);

    }
}

R.java用于统一接口返回对象(可选)

@Data
@AllArgsConstructor
@NoArgsConstructor
public class R {

    private Integer code;
    private String message;
    private Object data;


    public static R ok() {
        return R.ok(null);
    }

    public static R ok(Object obj) {
        R result = new R();
        result.setCode(200);
        result.setMessage("success");
        result.setData(obj);
        return result;
    }

    public static R error(Integer code, String message) {
        R result = new R();
        result.setCode(code);
        result.setMessage(message);
        result.setData("");
        return result;
    }

    public static R error(Integer code, String message, Object obj) {
        R result = new R();
        result.setCode(code);
        result.setMessage(message);
        result.setData(obj);
        return result;
    }

    public static R error(MyException e) {
        return R.error(e.getCode(), e.getMessage());
    }
}

2 利用Form形式上传

前端HTML

<h1>form上传文件</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input id="formfile" type="file" name="file"/><br/>
    <input type="submit" value="文件上传"/>
</form>

3. 利用Ajax上传

前端HTML

<h1>AJAX上传文件</h1>

<input id="file" type="file" name="file" ><br/>
<br/><br/>
<!--回显示图片-->
<img  id="imageview" style="height: 500px;border: 1px solid blue;"/>

<script src='/static/assets/js/jquery-2.0.3.min.js'></script>
<script>
    //当上传文件框选择文件后,上传文件
    $("#file").on('change',function() {
        var file=$(this)[0].files[0];
        var formData = new FormData();
        formData.append("file",file);

        $.ajax({
            url:"/upload",  //上传的url
            data:formData,
            dataType:"json",  //指定返回的格式为json
            type:"post",
            contentType: false,
            processData: false,
            success:function (data) {
                //回显图片
                $("#imageview").attr("src",data.data);
            }
        })
    })
</script>