1、vue部分
<a-upload
:multiple="false"
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
:customRequest="customRequest"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
选择图片
</div>
</div>
</a-upload>
//上传前验证
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('请上传图片文件');
}
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isLt2M) {
this.$message.error('文件不得超过20M!');
}
return isJpgOrPng && isLt2M;
},
// 自定义上传
customRequest(file){
const form = new FormData()
form.append('file', file.file)
// 用自己的接口
console.log(form);
uploadImg(form).then(res => {
console.log(res);
if (res.success) {
// 调用组件内方法, 设置为成功状态
file.onSuccess(res, file.file)
file.status = 'done'
this.imageUrl = res.message;
} else {
file.onError()
file.status = 'error'
}
})
},
api.js 里添加上传文件的请求
//上传文件
export function uploadImg (formdata) {
return request({
url: api.uploadImg,//后台访问的路径
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },//'Content-Type': 'multipart/form-data'
})
}
2、java后台:使用的jeecgboot框架的自带上传方法,懒得改直接贴上来了
@RequestMapping(value = "uploadImg", method = RequestMethod.POST)
public Result<?> upload(HttpServletRequest request,HttpServletRequest response) throws Exception {
Result<?> result = new Result<>();
String savePath = "";
String bizPath = request.getParameter("biz");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("file");// 获取上传文件对象
savePath = this.uploadLocal(file,bizPath); //调用上传方法返回保存的路径
if(oConvertUtils.isNotEmpty(savePath)){
result.setMessage(savePath);
result.setSuccess(true);
}else {
result.setMessage("上传失败!");
result.setSuccess(false);
}
return result;
}