SpringBoot+Vue 08--文件上传与下载

element+上面有模板可以把文件上传到服务器，但是服务器的接口需要自己写

上传接口

• 存储的文件夹
  
• 输入输出流（开源工具类）
  上次用过的Hutool工具类
  出现无法import Hutool的问题，重启一遍idea即可。参考：
  https://blog.csdn.net/weixin_39208819/article/details/82320818
  这里出现了无法引入hutool的问题：
  
  之前的pom文件里下载的是这个版本的依赖：
  
  今天重看了一下hutool的文档，发现不是这个版本（？好奇怪）
  修改版本：
  
  问题解决了
  
  使用Postman调试一下，调用接口，看它是不是有问题。
  打断点，启动debug
  
  
  在idea里面fn+F8，进入到下一行：
  
  接收到了图片信息，说明文件从postman里面传到了后台
  
  
  但是如果把这个文件再传一遍，就会发现后来传的这个文件把前面传的同名文件覆盖掉了，而且相同的文件名也可能是不同文件。解决：在文件前面加个前缀即可。
  生成唯一标识与文件绑定
  
  重启后：
  

下载接口

一定要写这个，不要写错了，不然找不到getOutputStream方法：

返回url

重启后端-----send-----返回接口的url

但是输入文件的路径后报500错误

哦，文件获取路径写错了



好耶

前端

新建配置文件，解决跨域问题

package com.example.demo.common.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

在文件传输成功后对form对象进行赋值：

成功放入数据库

在表格中显示图片：




清空已上传的文件列表



这样就可以清空历史文件列表，但是出现如下问题：

因为弹窗是异步加载的，在单机按钮的时候，弹窗是不存在的（是在点击按钮之后才出来的），所以获取不到handleEdit里面ref的组件，会变成undefined调用clearFiles()组件，会报错。
处理未来元素的方法：

再把add和修改里面的这个加个if，由内容了才能清空

OK