SpringBoot结合antd组件Upload实现文件上传

  
## ******************************* 配置文件上传 ***********************************
# 是否启用SpringMVC多分部上传功能
spring.servlet.multipart.enabled=true
# 将文件写入磁盘的阀值。值可以使用后缀“MB”或“KB”来表示兆字节或字节大小
spring.servlet.multipart.file-size-threshold=0
# 指定默认上传的文件夹
# spring.servlet.multipart.location=/upload
# 限制单个文件最大大小
spring.servlet.multipart.max-file-size=1MB
# 限制所有文件最大大小
spring.servlet.multipart.max-request-size=10MB
# 是否延迟多部件文件请求的参数和文件的解析
spring.servlet.multipart.resolve-lazily=false     
  
  
## ***********************  配置静态资源文件  读取静态文件的依赖   ***************************************
spring.resources.static-locations=classpath:/static/
# 以jar包发布项目时，我们存储的路径是与jar包同级的static目录，因此我们需要在jar包目录的  
# application.properties配置文件中设置静态资源路径，如下所示：
# 设置静态资源路径，多个以逗号分隔
# spring.resources.static-locations=classpath:static/,file:static/
spring.mvc.static-path-pattern=/static/**
  

@PostMapping("/modification-avatar")
    public Map<String, Object> update(@RequestParam(value = "file",required = false) MultipartFile file, HttpServletRequest request) throws FileNotFoundException {
        User user = getUserUtils.getUserByRequest(request);
        Map<String, Object> map = personalService.modifyUserAvatar(file, request, user);
        return map;
    }  
 

  
 /**
     * @Param: file  前端上传过来的图片
     * @Param: request 用户发送的请求，主要包含了用户的登录信息以及权限
     * @Param: user 当前用户
     * @description:TODO
     * 修改用户头像
     * @Return
    */
    @Transactional(isolation = Isolation.REPEATABLE_READ,propagation = Propagation.REQUIRED,rollbackFor = {Exception.class,RuntimeException.class})
    public Map<String, Object> modifyUserAvatar(MultipartFile file, HttpServletRequest request, User user) throws FileNotFoundException {
        Map<String, Object> result = new HashMap<>(2);
        if (file!=null && user != null){
               // 上传到了当前服务器的相对路径下 但是当前服务器是内置tomcat  相对路径如下
               // String path = request.getServletContext().getRealPath("static/user/picture/" + user.getUserName());
            String path = ResourceUtils.getURL("classpath:").getPath()+"static/user/picture/" + user.getUserName();
            // 上传文件
            Map<String, Object> map = UploadPicUtils.uploadPicture(file, path);
            // 根据工具类中标识的返回状态码，判断是否上传成功
            if ((int)map.get("status")==0){
                // 返回值为0代表上传成功
                //修改数据库记录
                User user1 = new User();
                user1.setId(user.getId());
                user1.setUserName(user.getUserName());
                user1.setUserPic((String) map.get("url"));
                User updateUser = userService.updateUser(user1);
                if (updateUser!=null){
                    result.put("status","success");
                    //删除原来的头像
                    DeletePicUtils.delect(ResourceUtils.getURL("classpath:").getPath()+user.getUserPic());
                }else {
                    result.put("status","error");
                }
            }else {
                result.put("status","error");
            }
        }else {
            result.put("status","error");
        }

        return result;

    }  
  

/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import { extend } from 'umi-request';
import { notification } from 'antd';


const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户访问成功，但是未授权，访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
/**
 * 异常处理程序
 */

const errorHandler = (error) => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
};


/**
 * 配置request请求时的默认参数
 */

const request = extend({
  errorHandler,
  // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});
// request拦截器, 改变url 或 options.
request.interceptors.request.use(async (url, options) => {

  // eslint-disable-next-line @typescript-eslint/naming-convention
  const c_token = localStorage.getItem("Authorization");
  const authority = localStorage.getItem("authority");
  if (c_token) {
    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': c_token,
      'authority':authority
    };
    return (
      {
        url: url,
        options: { ...options, headers: headers },
      }
    );
  } else {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': c_token,
      'authority':authority
    };
    return (
      {
        url: url,
        options: { ...options },
      }
    );
  }

})

// response拦截器, 处理response
request.interceptors.response.use((response, options) => {
  const token = response.headers.get("Authorization");
  const authority = response.headers.get("authority");
  if (token) {
    localStorage.setItem("Authorization", token);
    localStorage.setItem("authority", authority);
  }
  return response;
});

export default request;