13、分享-文件上传

目标

• 自动上传
• 手动上传
• 文件个数限制（如果个数超过时，给用户一个提示）
• 文件与基本信息关联时，带普通参数
• 文件上传，携带form表单信息

自动上传

参考element-ui拖拽上传

@PostMapping("/multiUpload4Param")
@ResponseBody
public String multiUpload4Param(HttpServletRequest request,String name,String age,MultipartFile[] file,String c_id) {
    System.out.println(name);
    System.out.println(age);
    List files = ((MultipartHttpServletRequest) request).getFiles("file");
    String filePath = request.getRealPath("/upload");
    for (int i = 0; i < files.size(); i++) {
        MultipartFile fileitem = files.get(i);
        if (fileitem.isEmpty()) {
            return "上传第" + (i++) + "个文件失败";
        }
        String fileName = fileitem.getOriginalFilename();
        File dest=new File(filePath,fileName);
        try {
            fileitem.transferTo(dest);
            LOGGER.info("第" + (i + 1) + "个文件上传成功");
        } catch (IOException e) {
            LOGGER.error(e.toString(), e);
            return "上传第" + (i++) + "个文件失败";
        }
    }

    return "上传成功";
}

跨域权限设置

package com.neuedu.demo.config;

import static org.springframework.web.cors.CorsConfiguration.ALL;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
@ComponentScan(basePackages={"com.neuedu.demo"})
public class SpringConfig {
    //增加跨域权限配置
    @Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
    // 限制了路径和域名的访问
/*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/
    //设置允许跨域的路径
    registry.addMapping("/**")
       //设置允许跨域请求的域名
   // .allowedOrigins(ALL)
  //设置允许跨域请求的域名,如果想要传递cookie,就不能再用*
.allowedOrigins("http://localhost:8080")
  //是否允许证书 不再默认开启
.allowCredentials(true)
  //设置允许的方法
.allowedMethods(ALL)
  //设置允许的header
.allowedHeaders(ALL)
//.exposedHeaders(HttpHeaders.SET_COOKIE, "token")
//跨域允许时间
.maxAge(3600);
 }
};
}
}

手动控制上传

参考element-ui手动上传

ref="upload"
:auto-upload="false"

上传到服务器


methods:{
        submitUpload() {
    this.$refs.upload.submit();
  }

文件个数控制

参考element-ui 点击上传

    :limit="2"
    :on-exceed="handleExceed"

  handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  }

把文件与指定内容ID关联

本质上是实现上传时带普通参数

：data属性可以带参数（我用form代替）

 :data="{
    c_id: this.form.c_id
 }"
        
data() {
        return {
            form:{
                c_id:'123'
            }
        };
    }

完整代码

文件上传带form

    

    

    

package com.neuedu.demo.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/upload")
public class FileUpload {
    @PostMapping("simple")
    public String simpleUpload(MultipartFile[] file,String name,String age) {
        String result = "";
        //打印文件上传的原始文件名
        System.out.println(file[0].getOriginalFilename());
        return result;
    }
}