element + springboot上传并展示图片

流程简介：前端页面使用element自带的el-upload标签上传文件，后端获取文件绝对路径后将图片上传到服务器，再将服务器存储的绝对路径映射为url路径（前端页面无法直接使用绝对路径打开，所以必须将绝对路径转为url路径才可展示文件）

上传图片

element页面代码

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

springboot页面代码

@RestController
@RequestMapping(value = "/api/mainadmin" ,produces = "application/json;charset=UTF-8")
public class FileController {

    @PostMapping(value = "/fileUpload")
    public String fileUpload(@RequestParam(value = "file")MultipartFile file){
        if (file.isEmpty()){
            return"空文件";
        } else {
            String fileName = file.getOriginalFilename();   //文件名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));  //后缀名
            String filePath = "D://ych//img//user//";	//存储路径
            fileName = UUID.randomUUID().toString().replace("-","")+suffixName; //新文件名
            File dest = new File(filePath + fileName);
            if (!dest.getParentFile().exists()){
                dest.getParentFile().exists();
            }
            try {
                file.transferTo(dest);
            }catch (IOException e){
                e.printStackTrace();
            }
            String filename = "/test_img/"+fileName;
            System.out.println(filename);
            return filename;
        }
    }

}

展示图片

element页面代码

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        pic: '',  //图片路径
        picList: [  //图片大图路径
          ''
        ]
      }
    },
    //进入页面就调用以下方法
    created() {
      //获取token
      this.token = localStorage.getItem('token');
      this.picUrl = localStorage.getItem('picUrl');
      this.getUserByToken();
    },
    methods:{
      //根据token获取用户信息
      getUserByToken(){
        this.axios({
          method: 'get',
          url: 'api/user/getUserByToken',
          headers: {
            'token': this.token
          }
        }).then(response => {
          console.log("token",response)
          if (response.data.status == 0){
            this.users = response.data.data;
            this.pic = this.picUrl + this.users.headPic;
            this.picList[0] = this.pic
            console.log(this.picList)
          } else if (response.data.status == 1){
            alert("token已过期或更新，请联系管理员");
          }
        })
      },
    },
  }
</script>

springboot页面代码

通过配置文件将本地路径转为url访问的网络路径
如果是存放linux服务器，file:/usr/java/image。
注：如果多出一个/会导致java.net.UnknownHostException异常

@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        registry.addResourceHandler("/test_img/**")
                .addResourceLocations("file:D://ych//img//user//");
    }

}