1、引入antd上传图片需要的包
-
import React, { Component } from 'react';
-
import { Upload, Icon, message } from 'antd';
-
import reqwest from 'reqwest';
class Register extends Component {
state = {
loading: false,
};
render() {
const uploadButton = (
<div>
<Icon type={this.state.loading ? 'loading' : 'plus'} />
<div className="ant-upload-text">上传</div>
</div>
);
const { imageUrl } = this.state;
const props = {
name: "avatar",
showUploadList: false,//设置只上传一张图片，根据实际情况修改
customRequest: info => {//手动上传
const formData = new FormData();
formData.append('avatar', info.file);//名字和后端接口名字对应
reqwest({
url: 'http://localhost:8080/user/uploadImage',//上传url
method: 'post',
processData: false,
data: formData,
success: (res) => {//上传成功回调
if (res.code === '0') {
this.setState({
imageUrl: res.imageUrl
});
message.success('上传成功！');
}
},
error: () => {//上传失败回调
message.error('上传失败！');
},
});
},
onRemove: file => {//删除图片调用
this.setState(state => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
listType: "picture-card",
className: "avatar-uploader",
beforeUpload: file => {//控制上传图片格式
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('您只能上传JPG/PNG 文件!');
return;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图片大小必须小于2MB!');
return;
}
return isJpgOrPng && isLt2M;
},
};
}
return (
<div className={styles.main}>
<Upload {...props}>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
</div>
)
}
3、后端代码实现
@RestController
@RequestMapping("/user")
public class UserController {
/**
* 图片上传
*/
@RequestMapping(value = "/uploadImage",method = RequestMethod.POST)
@ResponseBody
public R uploadImage(@RequestParam(value = "avatar") MultipartFile avatar){
Map<String,Object> map = new HashMap<>();
if (avatar.isEmpty()) {
return R.error();
}else {
//保存时的文件名
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
Calendar calendar = Calendar.getInstance();
String dateName = df.format(calendar.getTime())+avatar.getOriginalFilename();
//保存文件的绝对路径
WebApplicationContext webApplicationContext = (WebApplicationContext) SpringContextUtils.applicationContext;
ServletContext servletContext = webApplicationContext.getServletContext();
String realPath = servletContext.getRealPath("/");
String filePath = realPath + "WEB-INF"+File.separator + "classes" + File.separator +"static" + File.separator + "resource" + File.separator+dateName;//此路径是放在tomcat war包的绝对路径
File newFile = new File(filePath);
System.out.println("filePath=:"+filePath);
//MultipartFile的方法直接写文件
try {
//上传文件
avatar.transferTo(newFile);
//数据库存储的相对路径
String projectPath = servletContext.getContextPath();
HttpServletRequest request = HttpContextUtils.getHttpServletRequest();
String contextpath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+projectPath;
String url = contextpath + "/resource/"+dateName;//此路径是放在tomcat war包的相对路径
//文件名与文件URL存入数据库表
System.out.println("url=:"+url);
map.put("imageUrl",url);//返回前台
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
}
return R.ok(map);
}
}