文件上传

1. 引入依赖

<!--文件上传依赖-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

2. 增添配置

• applicationContext.xml中

<!--文件上传配置-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--单位b，最大上传10M-->
    <property name="maxUploadSize" value="10485760"/>
</bean>

3. 后端部分

1. service层

• 业务判断

@Override
public MultipartFile fileIsEmpty(MultipartFile file) throws UserException {
    if (file.isEmpty()){
        throw new UserException("上传文件为空");
    }
    return file;
}

2. controller层

• 后端接口
  • MultipartFile： 为文件格式的对象，保存文件的各种信息
  • 流程：
    • 定义保存路径
    • 给文件更名
    • 创建文件对象（路径为保存路径+更完名的文件名）
    • 将MultipartFile对象转化为流，赋值给File对象

@ResponseBody
@PostMapping("/upload")
public AjaxObj upload(MultipartFile file, HttpServletRequest request) throws UserException {
    file = userService.fileIsEmpty(file);
    //文件保存到哪个路径
    String realPath = request.getServletContext().getRealPath(env.getProperty("UPLOAD_ADDRESS"));
    //将文件存放的最终路径（带文件名保存，带盘符），文件实体
    String finalPath = System.currentTimeMillis()+file.getOriginalFilename();
    File finalFile = new File(realPath+"/"+finalPath);
    try {
        //将文件转换为流的形式，赋给file对象
        FileUtils.copyInputStreamToFile(file.getInputStream(),finalFile);
        return new AjaxObj<String>("上传成功",env.getProperty("UPLOAD_ADDRESS")+"/"+finalPath);
    } catch (IOException e) {
        //请求失败
        e.printStackTrace();
        return new AjaxObj(Integer.parseInt(env.getProperty("ERROR_UPLOAD_IMAGE")),"上传失败"+e.getMessage(),null);
    }
}

4.前端部分

1. 引入jq

2. 获取前端上传的文件对象

• 并封装为formData对象

var files = $('.file').prop("files");
if (files.length == 0){
    alert("请选择上传的文件");
    return;
}
//获取对象为file对象不是dom对象
var file = $('.file').prop("files")[0];
//封装到form对象中，方便传回后端
var formdata = new FormData();
formdata.append("file",file);

3. 用ajax向后端发送file对象请求

• data为后端传过来的AjaxObj的json格式的对象，data属性为保存的路径数据

$.ajax({
    url:"${pageContext.request.contextPath}/user/upload",
    type:"POST",
    data:formdata,
    //告诉jq不去设置请求头
    contentType: false,
    //告诉jq不要处理发送的数据
    processData:false,
    success(data){
        console.log(data.data);
        //es6新特性，反引号中的信息无视换行
        $('.show').append(`
        <div>
            <img src="${pageContext.request.contextPath}`+data.data+`"/>
        </div>
        `);
    }
})

5. 鸟瞰流程

1. 前端传文件，向后端发post请求
2. 后端接受文件，设置文件存放路径，并给文件更名
3. 后端将存放路径回调给前端
4. 前端接收路径数据，并在前端用img标签展示出来具体图片