目标
- 自动上传
- 手动上传
- 文件个数限制（如果个数超过时，给用户一个提示）
- 文件与基本信息关联时，带普通参数
- 文件上传，携带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;
}
}
