vue-springboot实现文件上传和下载（项目根路径篇）

如果你满足以下条件，则可以继续往下看:

• 前端使用vue并且想使用url访问图片资源
• 后端使用springboot并且想把图片存储在项目根路径下

后端配置

需要创建配置文件，允许通过url直接访问文件资源

package io.renren;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
//        registry.addResourceHandler("/resource/**").addResourceLocations("file:/d:/code/school/api/resource/");   //windows
        registry.addResourceHandler("/resource/**").addResourceLocations("file:/root/resource/"); //linux
    }
}

 下面是上传文件的代码

    @RequestMapping(value = "/uploadFile")
    public R uploadFile(MultipartFile file, HttpServletRequest request) {
        if (file.isEmpty()) {
            return R.error("头像文件为空");
        }
        String uuid;
        try{
            //上传
            byte[] bytes = file.getBytes();
            String fileSuffix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            uuid = UUID.randomUUID().toString()+fileSuffix;
            Path path = Paths.get("resource/" + uuid);
            path.toFile().getParentFile().mkdirs();
            path.toFile().createNewFile();
            Files.write(path, bytes);
        }catch(Exception e) {
            e.printStackTrace();
            return R.error("上传失败");
        }
        return R.ok("上传成功").put("address", uuid);
    }

 

浏览器访问

#示例
localhost:8001/admin/resource/9d1f3a13-5eb0-4b24-8a8c-ff20bb07ec31.jfif

#格式
后端接口地址/resource/xxxx.xx