我想获取图片的上传路径,并在前端把上传路径传给addForm.pictures,可以麻烦大家帮我看一下,前后端的代码要怎么改吗?我现在返回的好像是图片的名字,并且数据库里面没有办法保存,是空白的
<el-col :span="8">
<el-form-item label="物资图片" prop="unit">
<el-upload
accept="image/jpeg,image/png"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
ref="upload"
:action="'http://localhost:8989/api/uploadImage'"
:http-request="upload"
:auto-upload="false"
:before-upload="onBeforeUpload"
multiple
:limit="1"
:on-exceed="handleExceed"
v-model="addForm.pictures">
<el-button size="small" type="primary">点击上传el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1M
el-upload>
el-form-item>
el-col>
el-row>
<el-form-item>
<el-button type="primary" @click="addIn">立即捐赠el-button>
el-form-item>
addIn() {
this.$refs.upload.submit();
this.$refs.addFormRef.validate(async valid => {
if (!valid) return;
const {data: res} = await this.$http.post("addIn2", this.addForm);
if (res != "success") {
return this.$message.error("捐赠失败~");
}
this.$message.success("捐赠成功~");
this.addDialogVisible = false;
});
},
<insert id="addIn">
INSERT INTO instock
(itemname,numbers,fromwho,worker,state,unit,pictures)
VALUE
(#{itemname},#{numbers},#{fromwho},#{worker},#{state},#{unit},#{pictures})
insert>
@RequestMapping("/addIn2")
public String addIn2(@RequestBody InStock inStock){
inStock.setState(0);
inStock.setFromwho(2);
int i = inStockDao.addIn(inStock);
return i > 0 ? "success":"error";
}
@RequestMapping(value = "/api/uploadImage", method = RequestMethod.POST)
@ResponseBody
public String uploadImage(@RequestParam("files") MultipartFile file) throws IOException {
System.out.println(file.getOriginalFilename() + "图片已传入!!");
byte[] b = file.getBytes();
String fileName = file.getOriginalFilename();
Path path = Paths.get("src/main/resources/pictures/" + fileName);
Files.write(path, b);
return fileName;
}
你说的上传路径是什么,是浏览器端的客户端的文件路径?这个不是所有的浏览器都支持获取的