<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    
    
    


    

        <%--action：文件上传的路径--%>
        
            
            
        
    

（2）后台接口

与普通上传到本地文件类似，但是需要将文件所在地址返回给页面用图片文件的回显。

//创建返回结果类，用于存储返回结果
//使用lombok插件可通过以下三个注解实现get、set方法以及有参无参构造方法的建立
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CommonResult {
    private Integer code;
    private String msg;
    private Object data;
}



    @RequestMapping("/upload02")
    @ResponseBody
    public CommonResult upload01(MultipartFile file, HttpServletRequest request) throws Exception{
        String path = request.getSession().getServletContext().getRealPath("upload");
        File thisFile = new File(path);
        if (!thisFile.exists()){
            thisFile.mkdirs();
        }
        String fileName = UUID.randomUUID().toString().replace("-", "")+file.getOriginalFilename();
        File newFile = new File(path+"/"+fileName);
        file.transferTo(newFile);
        
        //返回文件所在地址
        return new CommonResult(100,"上传成功","http://localhost:8080/SpringMVC10/upload/"+fileName);
    }

12.3上传文件到远程文件服务器（这里我使用的是，OSS阿里云服务器）

12.3.1 为什么需要使用远程文件服务器？

文件上传到本地时，有两个缺点，第一就是若不进行配置，所上传的文件会在本地服务器重启时被删除掉。

第二，如果搭建集群的情况下，文件将不能够在集群中共享。

想解决以上的两个问题，就可以通过远程服务器来实现，这样在集群模式下，可以让多个服务器都能够访问这个远程服务器，来实现文件的存取。

12.3.2 如何使用阿里云OSS对象存储实现远程文件上传

（1）注册阿里云账号

此处略过

（2）找到对象存储OSS

（3）开通对象存储OSS服务 

（4） 开通后进入控制台，创建Bucket（可以理解为你的文件所存储的位置）

 需要变动的仅有读写权限，其余的默认即可

（5）申请阿里云密钥

我们需要使用密钥来通过java代码来访问OSS。

 这里需要进行验证，验证通过后

 （4）使用idea进行文件上传到阿里云oss

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    <%--引入css样式--%>
    
    <%--引入vue--%>
    
    
    
    
    





    
        
        
    

 后端接口实现

    @RequestMapping("/uploadToOSS")
    @ResponseBody
    public CommonResult uploadToOSS(MultipartFile file, HttpServletRequest request) throws Exception{

        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = 自己的密钥id";
        String accessKeySecret = "自己的密钥密码";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "com-zjw";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String nowTime = new SimpleDateFormat("yyyy/MM/dd").format(new Date());

        String fileName = nowTime+"/"+UUID.randomUUID().toString().replace("-", "")+file.getOriginalFilename();
        String objectName = fileName;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);


        try {
            InputStream inputStream = file.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        }
        finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url = "https://"+bucketName+"."+endpoint+"/"+objectName;
        //String url = endpoint.replace("//","//"+bucketName+".")+"/"+objectName;
        System.out.println(url);
        return new CommonResult(100,"上传成功",url);
    }

 这样写我们会发现，如果我们需要进行多次文件上传的话，就需要书写很多的重复代码，为了解决这个问题，我们可以抽取出一个工具类，在接口的实现方法中直接调用，简化我们的接口实现方法

public class UploadFileUntil {

    public static String upload(MultipartFile file) throws IOException {
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "自己的密钥id";
        String accessKeySecret = "自己的密钥密码";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "com-zjw";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String nowTime = new SimpleDateFormat("yyyy/MM/dd").format(new Date());

        String fileName = nowTime+"/"+ UUID.randomUUID().toString().replace("-", "")+file.getOriginalFilename();
        String objectName = fileName;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);


        try {
            InputStream inputStream = file.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        }
        finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url = "https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
}

 这样我们的接口实现方法就会简化很多

    @RequestMapping("/uploadAvatar")
    public CommonResult upalodAvatar(MultipartFile file){
        try {
            String url = UploadFileUntil.upload(file);
            return new CommonResult(100,"上传成功",url);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return new CommonResult(100,"上传失败",null);
    }

（5）带用户头像的表单提交

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    <%--引入vue--%>
    
    
    
    
    



    

        
            
                
                    
                    
                
            

            
                
            

            
                
            

            
                
            

            
                提交
            

        
    

接口实现方法

@RestController
public class UserController {

    @RequestMapping("/uploadAvatar")
    public CommonResult upalodAvatar(MultipartFile file){
        try {
            String url = UploadFileUntil.upload(file);
            return new CommonResult(100,"上传成功",url);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return new CommonResult(100,"上传失败",null);
    }
    @PostMapping("/addUser")
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(100,"添加成功",null);
    }
}

两个接口一个实现头像上传的功能，并且将图片的url传给前端界面，回显在页面上，并且给表单数据的imageUrl赋值，在表单的提交方法中，将数据传给controller层，之后与数据库交互，将数据存储到数据库中。

（6）补充的零散内容

@RestController

类上等价于 @COntroller+@ResponseBody，该注解下所有的方法都是返回json数据
@RequestMapping: 作用: 把请求路径映射到响应的方法上。

 @RequestParam(value = "u"):设置你接受的请求参数名。查询参数

@RequestMapping(value = "/addUser",method = RequestMethod.POST)
       method:表示该接口接受的请求方式.不设置可以接受任意请求方式

@GetMapping("addUser"):表示只接受get提交方式的请求     

@RequestBody:把请求的json数据转换为java对象。从前端到后端

@ResponseBody:把java转换为json数据   从后端转前端