需求:不自动上传文件并保存本地
1.单文件
上传单文件时可以使用action上传路径,调用自带的submit方法实现
前端代码:
<el-form-item prop="file">
<el-upload :limit="1"
:auto-upload="false"
:file-list="form.bannerUrl"
:action="uploadUrl" ref="upload"
list-type="picture-card"
:on-change="fileChange"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
export default {
name: "AddBanner",
data(){
return{
uploadUrl:"[后端上传路径]",
file:null
}
},
methods:{
handleRemove(file, fileList) {
//是否有上传文件的表单验证可忽略
if (fileList.length === 0) {
this.file = null
this.$refs.form.validateField('file')
}
},
fileChange(uploadFile, fileList) {
this.file = uploadFile;
//是否有上传文件的表单验证可忽略
if (fileList.length !== 0) {
this.$refs.form.validateField('file')
}
},
}
}
在实现提交的方法里加上 this.$refs.upload.submit();(upload对应el-upload中ref="upload")
后端代码:
controller:
@Autowired
private IExhibitService iExhibitService;
@PostMapping("/upload")
public JsonResult upload(@RequestParam("file") MultipartFile picFile) throws IOException{
String data=iUploadService.fileUpload(picFile,"banners");
return JsonResult.ok(data);
}
注:@RequestParam("file")一定要加,前端默认传过来的文件名为file,没有会报错;
使用MultipartFile接受前端传来的文件,关于MultipartFile
JsonResult 为自定义的给前端的返回结果类,如没有就替换为void,返回值依据自身情况而定。
Service:
public interface IUploadService {
String fileUpload(MultipartFile picFile,String folderName) throws IOException;
void fileRemove(String fileUrl);
}
@Service
public class UploadFileService implements IUploadService {
private String dirPath = "D:/ProgramData";
@Override
public String fileUpload(MultipartFile picFile,String folderName) throws IOException{
String fileName = picFile.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
fileName = UUID.randomUUID()+suffix;
File dirFile = new File(dirPath);
if (!dirFile.exists()){
dirFile.mkdirs();
}
String filePath = dirPath + "/"+folderName + "/"+ fileName;
File dirFile2=new File(filePath);
if (!dirFile2.exists()){
dirFile2.mkdirs();
}
picFile.transferTo(dirFile2);
return "/"+folderName + "/"+ fileName;
}
@Override
public void fileRemove(String fileUrl) {
String filePath = dirPath+fileUrl;
new File(filePath).delete();
}
}
2.多文件
不使用action的上传路径,需要一次上传多个文件,即一个文件数组;
前端代码:
<el-form-item class="f-start" prop="file" label="上传商品图片:">
<el-upload :auto-upload="false"
:file-list="form.exhibitImgs"
action="" ref="upload"
list-type="picture-card"
:on-change="fileChange"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">多个或单个,只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
</el-form-item>
export default {
name: "AddBanner",
data(){
return{
uploadUrl:"[后端上传路径]",
file:null,
exhibitImgs:[]
}
},
methods:{
handleRemove(file, fileList) {
//是否有上传文件的表单验证可忽略
if (fileList.length === 0) {
this.file = null
this.$refs.form.validateField('file')
}
},
fileChange(uploadFile, fileList) {
this.file = uploadFile;
this.exhibitImgs=fileList;
if (fileList.length !== 0) {
this.$refs.form.validateField('file')
}
},
}
}
submitImg(){
if (this.exhibitImgs.length===0){
return this.$message.warning('请选取文件后再上传');
}
let formData=new FormData();
let count =this.exhibitImgs.length;
for (let i=0;i<count;i++){
formData.append("files",this.exhibitImgs[i].raw)
}
let url="上传路径"
this.axios.post(url,formData).then((response)=>{
//xxxx自定义
})
},
注:前端传数组需要以formData的形式传,append方法会在一个值对后面再加一个值,组成一个数组;
如
formdata.append("apple",1);
formdata.append("apple",2);
formdata.append("apple",3);
//最终apple:[1,2,3]
注:console.log(formdata)不是添加的一组组键值对数据,需要console.log (formdata.getAll ("apple"))才能输出apple数组,且获取整个数组要用getAll,用get方法只能输出数组第一个元素
后端代码:
思路和单文件一致,但需注意:
public void uploadExhibitImg(@RequestParam("files")MultipartFile[] picFiles)
这里接受参数为MultipartFile数组,@RequestParam("files")变量名为前端传递的formData的键名
至此上传文件基本完工。