后台用postman测试的时候时没有问题的
<el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"
modal-append-to-body="false" :append-to-body="true">
<el-form :model="loos" class="demo-form-inline" :ref="loos">
<el-form-item label="遗失物品名称">
<el-input v-model="loos.loosName" placeholder="遗失物品名称"></el-input>
</el-form-item>
<el-upload class="upload-demo" v-model="loos.loosName" ref="upload" action="" :auto-upload="false">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过100kb</div>
</el-upload>
<el-form-item label="在哪找的">
<el-input v-model="loos.loosAddress" placeholder="在哪找的"></el-input>
</el-form-item>
<el-form-item label="捡到时间">
<el-date-picker v-model="loos.loosjDate" align="right" type="date" placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item label="被谁捡到的">
<el-input v-model="loos.receiveName" placeholder="被谁捡到的"></el-input>
</el-form-item>
<el-form-item label="被捡到的人的电话">
<el-input v-model="loos.receivePhone" placeholder="被捡到的人的电话"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose" icon="el-icon-circle-close">取 消</el-button>
<el-popconfirm title="确认提交吗？" @confirm="submitForm('upload')">
<el-button slot="reference" type="success" size="big" icon="el-icon-thumb"
style="margin-left: 20px;">立即提交
</el-button>
</el-popconfirm>
</span>
</el-dialog>
上传方法
submitForm(loos) {
console.log("-------------进入增加提交频道----------")
//表单数据的对象，存储表单数据
let formData = new FormData();
//调用表单验证
this.$refs[loos].validate((valid)=>{
if (valid) { //提交表单：axios发送请求
//使用ref属性获取图片对象
if (!this.$refs.upload._data.uploadFiles[0]) {
alert("请选择图片")
} else {
//把图片追加到form对象中
formData.append("upload", this.$refs.upload._data.uploadFiles[0].raw);
formData.append("loosName", this.loos.loosName);
formData.append("loosImages", this.loos.loosImages);
formData.append("loosAddress", this.loos.loosAddress);
formData.append("loosjDate", this.loos.loosjDate);
//自己手动转换日期格式："yyyy-MM-dd"
// let date = this.loos.releaseDate;
// let nian = date.getFullYear();
// let yue = date.getMonth() + 1;
// let ri = date.getDate();
// formData.append("releaseDate", nian + "-" + yue + "-" + ri);
formData.append("receiveName", this.loos.receiveName);
formData.append("receivePhone", this.loos.receivePhone);
formData.append("looslDate", this.loos.looslDate);
formData.append("admin", this.loos.admin);
//使用axios发送请求
axios.post("/api/admin/loos/save", formData, {
headers: {
"Content-Type": "mulitpart/form-data",
}
})
.then((response) => {
alert(response.data.msg)
if (response.data.code === 200) {
//新增成功，页面跳转
this.$router.push("/admin/lostList")
}
}).catch((err) => {
console.log(err)
})
}
} else {
console.log('error submit!!');
return false;
}
});
}
后台代码
@PostMapping("/save")
public Object save(Loos loos,MultipartFile upload){
Map<String,Object> map = new HashMap<>();
//验证是否上传了文件
if(upload.getSize()<=0){
map.put("code",402);
map.put("msg","请选择上传图片");
return map;
}
String fullName = upload.getOriginalFilename();//获取上传文件的全名称
String suffixName = fullName.substring(fullName.lastIndexOf("."));//获取文件的后缀名
//文件格式验证
List<String> geshi = Arrays.asList(".jpg",".gif",".png",".png");
if (!geshi.contains(suffixName)){
map.put("code",402);
map.put("msg","上传图片的格式不对");
return map;
}
//文件大小的验证:小于100KB
if (upload.getSize()>1024*100){
map.put("code",402);
map.put("msg","上传图片不能大于100KB");
return map;
}
//获取文件的删除路径
String rootPath = "D:/tupian";//存储文件的根路径
String[] fileDirAndName = getFileDirAndName();//调取方法获取文件的名称和路径
//判断文件存储路径是否存在，如果不存在，则创建
File fullFile = new File(rootPath,fileDirAndName[0]);
if (!fullFile.exists()){
fullFile.mkdirs();//如果不存在，则创建文件夹
}
//文件的存储名称
String fileName = fileDirAndName[1]+suffixName;
//创建上传文件的输出的file对象：
File outFile = new File(fullFile,fileName);
try {
//写出文件到磁盘
upload.transferTo(outFile);
//将文件的路径存储到数据库
loos.setLoosImages(fileDirAndName[0]+"/"+fileDirAndName[1]+suffixName);
//设置一些属性的默认值
loos.setAdmin(0);//默认未领回
//调用业务层新增的方法
loosService.save(loos);
map.put("code",200);
map.put("msg","新增成功！");
} catch (IOException e) {
//如果发生异常，此处需要删除文件
outFile.delete();
e.printStackTrace();
map.put("code",402);
map.put("msg","新增失败，请稍后重试！");
}
return map;
}
//文件上传
private String[] getFileDirAndName(){
//创建日历类
Calendar calendar = Calendar.getInstance();
//获取年月日 时分秒
int nian = calendar.get(Calendar.YEAR);
int yue = calendar.get(Calendar.MONTH)+1;
int ri = calendar.get(Calendar.DAY_OF_MONTH);
//随机字符串
String suiji = UUID.randomUUID().toString().split("-")[4];
//文件路径
String filePath = nian+"-"+(yue<10?"0"+yue:yue);
//返回文件的名称
String fileName = ""+nian+(yue<10?"0"+yue:yue)+(ri<10?"0"+ri:ri)+suiji;
//返回文件路径和名称
return new String[]{filePath,fileName};
}
报错截屏
平台上的解决方法我也试过没有用，救命啊
