【springboot+vue】文件上传的本地存储和阿里云OSS对象存储

本地存储

       文件上传时在服务端会产生一个临时文件，请求响应完成之后，这个临时文件被自动删除，并没有进行保存。此时我们就需要完成将上传的文件保存在服务器的本地磁盘上。

前端

<template>
        <el-upload class="avatar-uploader"
                   :show-file-list="false"
                   :action="uploadUrl"
                   :headers="tokenInfo"
                   ref="upload"
                   :on-success="handleAvatarSuccess">
          <img v-if="dataForm.imgUrl"
               :src="dataForm.imgUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      file: null,
    }
  }
}
  methods: {
    handleAvatarSuccess (raw,file) {
      this.dataForm.imgUrl = URL.createObjectURL(file.raw)
    }
}
</script>

上传图片后通过URL.createObjectURL()方法生成一个图片URL，并将img标签的src属性指向这个URL

后端

配置类

首先建立配置类继承WebMvcConfigurer并重写addResourceHandlers方法：

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
 
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        String filePath = System.getProperty("user.dir") + "/src/main/resources/static/img/";
        System.out.println(filePath);
        registry.addResourceHandler("/static/**")
                .addResourceLocations("file:" + filePath);
        //addResourceHandler()里的是虚拟路径，addResourceLocations()里加的是真实路径
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

addResourceHandler()里的是虚拟路径，addResourceLocations()里加的是真实路径

controller层

    @PostMapping("/upload")
    public R upload(@RequestParam("file") MultipartFile file) throws IOException {
 
        String fileName = file.getOriginalFilename();
        String hToken = UUID.randomUUID().toString();
        String HeadName = hToken + fileName;
        String filePath = System.getProperty("user.dir") + "/src/main/resources/static/img/";
        String fileAddress = filePath + HeadName;  //文件真实路径
        try {
            file.transferTo(new File(fileAddress));
 
        } catch (Exception e) {
        }
        return R.ok().put("url", "http://localhost:8080/static/" + HeadName);
        //文件映射路径
    }

保存文件到静态目录下，并返回该文件映射路径；

前端页面展示

下载图片

export default {
  data ()