(1)编写接收数据类
@Data
public class Result {
private int errno;
private String[] data;
}
(2)编写控制器,接收上传图片
@RequestMapping("/upload")
@ResponseBody
public Result upload(HttpServletRequest request, multipartfile file) throws IOException {
// 创建文件夹,存放上传文件
// 1.设置上传文件夹的真实路径
String realPath = ResourceUtils.getURL("classpath:").getPath() + "/static/upload";
// 2.判断该文件夹是否存在,如果不存在,新建文件夹
File dir = new File(realPath);
if (!dir.exists()){
dir.mkdirs();
}
// 拿到上传文件名
String filename = file.getoriginalFilename();
filename = UUID.randomUUID()+filename;
// 创建空文件
File newFile = new File(dir, filename);
// 将上传的文件写到空文件中
file.transferTo(newFile);
// 构造返回结果
Result Result = new Result();
Result.setErrno(0);
String[] data = {"/upload/"+filename};
Result.setData(data);
return Result;
}
(3)在yml文件中配置允许传输文件的大小
# 上传文件
spring:
servlet:
multipart:
max-file-size: 10MB # 最大单个文件
max-request-size: 10MB # 一次请求最大上传
(4)编写前端页面
①引入jquery.form.js
②修改页面
<div class="col-md-8 data" style="height: 110px">
<form id="uploadPImage" enctype="multipart/form-data">
<input type="file" name="file" id="pImageFile">
</form>
</div>
<script>
$(function (){
$("#pImageFile").change(function (){
// 异步提交表单
$("#uploadPImage").ajaxSubmit({
url:"/backstage/product/upload",
type: "post",
success:function (result){
// 上传成功后,图片回显到pImage上
$("#pImage").attr("src",result.data[0]);
// 上传成功后,图片地址放入产品表单的隐藏域中
$("#hiddenPImage").val(result.data[0]);
}
})
})
})
</script>
<div class="col-md-2 data" style="height: 110px">
<img height="100" th:src="@{/backstage/img/no-img.png}" id="pImage">
</div>
<!--将数据传到后台-->
<form th:action="@{/backstage/product/add}" method="post">
<input type="hidden" name="pImage" id="hiddenPImage">
</form>
原文地址:https://www.jb51.cc/wenti/3281856.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。