13、分享-文件上传

目标

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

自动上传

参考element-ui拖拽上传

<template>
    <div>
        <el-upload
  class="upload-demo"
  drag
  action="http://localhost:8000/haha/multiUpload4Param"
  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>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style>

</style>



@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<MultipartFile> 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"

<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>


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'
            }
        };
    }

完整代码

<template>
    <div>
        <el-upload
  class="upload-demo"
  drag
  ref="upload"
  action="http://localhost:8000/haha/multiUpload4Param"
  multiple
  :auto-upload="false"
  :limit="2"
  :on-exceed="handleExceed"
 :data="{
    c_id: this.form.c_id
 }"
  >
  <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>

<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                    c_id:'123'
                }
            };
        },
        methods:{
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      }
        }
    }
</script>

<style>

</style>

文件上传带form

    <template>
        <div>
            <el-form :model="form"  ref="form" label-width="100px" >
            <el-form-item label="用户名" >
                    <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="年令" >
                    <el-input type="age" v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
        <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8082/upload/simple"
        :auto-upload="false"
        :data="form"
        ref="upload"
        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><br>
     <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
     </div>
    </template>

    <script>
        export default {
            data() {
                return {
                     form: {
                            name: '',
                            age: ''
                    }
                };
            },
            methods: {
                submitUpload() {
                    this.$refs.upload.submit();
                }
                
            }
        }
    </script>

    <style>
    </style>

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;
    }
}