13.springboot和vue实现文件上传

预期效果

前端核心代码

由于咱们是上传 logo 图片，所以我们可以先在前端校验一下文件格式必须是图片格式，这样用户体验就会好些。

 <el-upload
              class="upload-demo"
              :before-upload="beforeUpload"
              name="logo"
              accept="image/*"
              :show-file-list="false"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :action="baseURL+'/appInfo/upLogo/'+scope.row.id"
              :limit="1">
            <el-button ref="fileInput" size="small" type="warning">上传logo</el-button>
          </el-upload>


          

uploadSuccess(response, file, fileList){

        console.log(response);
        console.log(file);
        console.log(fileList);

        //清空fileList
        this.fileList=[]

        this.getPage()

      },

 beforeUpload(file) {
        const isImage = file.type.startsWith('image/');
        if (!isImage) {
          this.$message.error('只能上传图片文件!');
        }
        return isImage;
      },

    <el-table-column
          label="logo图">

        <template slot-scope="scope">
          <img :src="baseURL+'/'+scope.row.logopicpath"  alt="" style="height: 50px;width: 50px">
        </template>
      </el-table-column>

备注：baseURL 是：process.env.VUE_APP_BASE_API

而这个是谁？ 读取.env.development 这个文件中的VUE_APP_BASE_API 的值：/dev-api

后端核心代码

自定义静态资源

要访问到我们的图片 ，我们的图片是在磁盘上

在application.yml配置

web:
  upload-path: D:/upimgs/
spring:
  mvc:
    static-path-pattern: /**
  web:
    resources:
      static-locations:
        file:${web.upload-path},
        classpath:/META-INF/resources/,
        classpath:/resources/,
        classpath:/static/,
        classpath:/public/

有可能上面这么写不起作用，推荐下面的写法

upload:
  path: C:/work/xiaobai/
spring:
  resources:
    static-locations:
      file:${upload.path},
      classpath:/META-INF/resources/,
      classpath:/resources/,
      classpath:/static/,
      classpath:/public/

更短还更好记。

单文件上传

Spring Boot 提供了自动配置类 MultipartAutoConfigure 可以实现文件上传，只需导入 spring-boot-starter-web 以及配置 spring.servlet.multipart.enabled=true 即可生效。

#表示是否开启文件上传支持,默认为true
spring.servlet.multipart.enabled=true
#修改文件上传临时保存路径
spring.servlet.multipart.location=C:/temp
#单个上传文件的最大限制 默认是1M
spring.servlet.multipart.max-file-size=2MB
#多个上传文件的最大限制 默认是10M
spring.servlet.multipart.max-request-size=10MB
#文件写入磁盘的阈值
spring.servlet.multipart.file-size-threshold=0B

@RestController
public class UploadController {

    @Value("${web.upload-path}")
    String uploadPath;


    @PostMapping("/upload")
    public ResultVo upload(MultipartFile file){
        if (!file.isEmpty()) {
            String originalFilename = file.getOriginalFilename();
            String format = originalFilename.substring(originalFilename.lastIndexOf("."));
            if (file.getSize()>500*1024) {
                return ResultVo.error("文件超过了500k");
            }else if(
                    format.equalsIgnoreCase(".jpg")||
                    format.equalsIgnoreCase(".png")||
                    format.equalsIgnoreCase(".jpeg")||
                    format.equalsIgnoreCase(".gif")
            ){

                //正常上传
                String fileName= UUID.randomUUID().toString().replace("-","");
                File saveFile=new File(uploadPath+fileName+format);
                try {
                    file.transferTo(saveFile);
                    return ResultVo.success("文件上传成功",fileName+format);
                } catch (IOException e) {
                    return ResultVo.error("文件上传出现异常");
                }


            }else{
                return ResultVo.error("文件格式不对");
            }
        }else{
            return ResultVo.error("文件没选");
        }

    }
}