引用别人的例子,写的很好
点击跳转
下面是自己的实践,记录学习过程,提交多种数据格式(JSON,String)时,可以分开处理:
对于图片和form其他更新提交的数据,分为两部分进行解决,先上传图片到我们本地文件夹位置,然后在将对应的文件路径返回到前端,前端就可以查看图片了了,同时数据库也存在图片了。
返回前台图片存储的地址,并将地址赋值。然后在更新数据,存储在数据库中
controller层
@RequestMapping(value = "/addpicture")
public String uploadFile(MultipartFile file,DrugInfo drugInfo) throws IOException {
/** * 上传图片 */
System.out.println(drugInfo.getLogo());
//图片上传成功后,将图片的地址写到数据库
//保存图片的路径(这是存在我项目中的images下了,你们可以设置路径)
String filePath = "自己的文件地址";
//获取原始图片的拓展名
String originalFilename = file.getOriginalFilename();
//新的文件名字
String newFileName = UUID.randomUUID() + originalFilename;
//封装上传文件位置的全路径
File targetFile = new File(filePath, newFileName);
//把本地文件上传到封装上传文件位置的全路径
file.transferTo(targetFile);
drugInfo.setLogo("http://localhost:8080/biyedrug/images/" + newFileName);
return drugInfo.getLogo();
}
element的upload
部分代码如下:
<el-upload
action="http://localhost:8080/biyedrug/druginfo/addpicture"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="imgLimit"
:show-file-list="true"
:on-success="onSuccess"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
处理方法部分代码如下:
<template>
<div>
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
label-width="80px"
>
<el-row>
<el-col :span="24">
<el-form-item v-if="type!='info'" label="logo" prop="logo">
<img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" style="width: 50%">
<div v-else>
<el-upload
action="http://localhost:8080/biyedrug/druginfo/addpicture"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="imgLimit"
:show-file-list="true"
:on-success="onSuccess"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.logo" label="logo" prop="logo">
<img style="margin-right:20px;" v-bind:key="index"
v-for="(item,index) in ruleForm.logo.split(',')" :src="item" width="100" height="100">
</el-form-item>
</div>
</el-col>
</el-row>
<el-row style="margin-left: 80px;margin-bottom: 20px">
<el-col :span="12" v-if="type!='info'">
<el-row>
<el-button type="danger" v-if="ruleForm.logo!=''" @click="deletepicture">删除图片</el-button>
<el-button type="primary" v-if="ruleForm.logo==''">上传图片</el-button>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
imgLimit: 1
};
},
methods: {
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 图片上传成功后,后台返回图片的路径
onSuccess: function (res) {
console.log(res);
console.log(res);
this.dialogImageUrl = res;
},
/**文件超出个数限制时的钩子 */
handleExceed() {
this.$message.error(`只能选择${ this.imgLimit}个文件`);
},
}
};
</script>
<style scoped>
.editor {
height: 500px;
}
</style>
然后也就实现了图片的上传
未写完,明天完善