springboot Vue+elmentui 实现图片上传 可携带其他参数

首先先实现后端

controller类

@PostMapping("/addHome")
public ResponseBase uploadWork(MultipartFile file, String homeAddress)  {
ResponseBase jsonData=new ResponseBase();
if (!file.isEmpty()) {
try {
if (file == null) {
return "请选择要上传的图片";
}
if (file.getSize() > 1024 * 1024 * 10) {
return "文件大小不能大于10M";
}
//获取文件后缀
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length());
if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
jsonData.setMessage("请选择jpg,jpeg,gif,png格式的图片");
}
String savePath = "D:\\image";
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在该目录，则创建目录
savePathFile.mkdir();
System.out.println("我是不存在得！！！！！");
}
//通过UUID生成唯一文件名
String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix;

try {
//将文件保存指定目录
file.transferTo(new File(savePath + "\\"+filename));
} catch (Exception e) {
e.printStackTrace();
return "保存文件异常";
}

//添加至数据库

} catch (Exception e) {
e.printStackTrace();

}
}
return "ok";

}

前端

<el-form label-width="60" :model="mergeForm" :rules="ruleMergeForm" ref="mergeForm">
<el-upload
ref="upload"
action="http://localhost:8080/test/home/addHome" //你请求的地址
:limit="1"//限制的文件个数
:on-exceed="onExceed"
:on-success="handleAvatarSuccess"//上传成功后
:data="mergeForm"//你要上传的其他参数
list-type="picture-card"
:auto-upload="false">//取消自动上传
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
</span>
</div>

</el-upload>
<el-dialog :visible.sync="imgDialogVisible">
<img width="100%" :src="imageUrl" alt="">
</el-dialog>
<el-form-item label="地址" prop="homeAddress">
<el-input v-model="mergeForm.homeAddress" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmitMergeForm('mergeForm')">确 定</el-button>
</div>

<script>

export default {
name: 'Home',
data: function () {
return {
imageUrl: '',
URL: "http://localhost:8080/ipfsemc/image/",
result: [],
imgDialogVisible: false,
dialogFormVisible: false,
dialogVisible: false,
mergeForm: {
homeId:"",
homeAddress: ""
},
ruleMergeForm: {
homeAddress: [{
required: true,
message: '跳转不能为空,且必须以http或https开头',
trigger: 'blur'
}
]

}
};
},
methods: {
handleAvatarSuccess(res, file) {
this.$message({
message: "成功！",
type: 'success'
});
},
handlePictureCardPreview(file) {
this.imageUrl = file.url;
this.imgDialogVisible = true;
},
//上传的文件个数超出设定时触发的函数
onExceed(files, fileList) {
this.$message({
type: 'info',
message: '最多只能上传一个图片',
duration: 6000
});
},

doSubmitMergeForm() {
this.$refs['mergeForm'].validate((valid) => { //表单验证不通过则不可以提交
if (false === valid) {
return false;
}
this.$refs.upload.submit()//图片上传

});
},

}
}
</script>

那里有问题 欢迎前来提问 你再成长 我也在成长！！！ 要不你再点个赞支持一下不！！哈哈

• 点赞
• 收藏
• 分享
• 文章举报