1.效果展示
2.Ant Design of Vue代码
- info.file.originFileObj拿到图片信息
- FormData封装数据
- 请求头'Content-Type': 'multipart/form-data'
- 请求类型post
- 多文件上传直接将这个数组对象里添加图片信息this.fileList.push(info.file.originFileObj)
<a-form-item
label="分类图片"
:labelCol="{span: 5}"
:wrapperCol="{span: 13, offset: 1}">
<a-upload
name="avatar"
listType="picture-card"
class="avatar-uploader"
:showUploadList="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@change="handleChange"
>
<img v-if="imgUrl" :src="imgUrl" alt="avatar" style="width: 100% "/>
<div v-else>
<a-icon :type="loading2 ? 'loading' : 'plus'" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
</a-form-item>
function getBase64 (img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
// 图片上传,获取到图片得文件流,保存到fileList中
handleChange (info) {
this.imgUrl = ''
if (info.file.status === 'uploading') return this.loading2 = true
if (info.file.status === 'done') {
getBase64(info.file.originFileObj, imageUrl => {
this.imgUrl = imageUrl
this.loading2 = false
})
this.fileList = info.file.originFileObj
}
}
// 弹出框确认按钮
handleOk (e) {
const formData = new FormData()
formData.append('file', this.fileList)
this.$upload('/cm_classify', formData).then(r => {
if (r.data.code === 200) {
this.btnSearch()
}
this.$message.warning(r.data.msg)
this.loading = false
this.visible = false
}).catch(() => {
this.loading = false
this.visible = false
})
}
- 请求头请加上 'Content-Type': 'multipart/form-data'
3.SpringBoot代码
- @RequestParam("file")接收前端请求数据
- 请求类型post
- 多文件上传请使用@RequestParam(value = "files") MultipartFile[] files接收前端请求数据
@PostMapping
public Result add(@RequestParam("file") MultipartFile file) throws Exception{
return iCmClassifyService.add(file);
}
/**
* 文件上传工具类
*/
@Autowired
private FileUtil fileUtil;
@Transactional
public Result add(@RequestParam("file") MultipartFile file) throws Exception {
// 获取文件,文件名
file.getOriginalFilename ();
// uploadFile 方法执行图片上传
fileUtil.uploadFile (file);
return Result.success ();
}
/**
* lixin
* 上传下载文件工具类
*/
@Component
public class FileUtil {
@Value("${file.path}")
private String dirpath;
/**
* 单文件上传
*
* @param file
* @return
* @throws Exception
*/
public String uploadFile(MultipartFile file) throws Exception {
// 首先校验图片格式
List<String> imageType = Lists.newArrayList("jpg", "jpeg", "png", "bmp", "gif");
// 获取文件名,带后缀
String originalFilename = file.getOriginalFilename();
// 获取文件的后缀格式
String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
if (imageType.contains(fileSuffix)) {
// 只有当满足图片格式时才进来,重新赋图片名,防止出现名称重复的情况
String newFileName = System.currentTimeMillis() + "." + fileSuffix;
String path = File.separator + newFileName;
File destFile = new File(this.dirpath + path);
if (!destFile.getParentFile().exists()) {
destFile.getParentFile().mkdirs();
}
try {
file.transferTo(destFile);
// 返回上传的文件名
return newFileName;
} catch (IOException e) {
return null;
}
} else {
// 非法文件
throw new Exception("the picture's suffix is illegal");
}
}
/**
* 多文件上传 返回上传后的文件名和原文件名
*
* @param file
* @return
* @throws Exception
*/
public Map<String, String> uploadFiles(MultipartFile[] file) throws Exception {
String fileNames[] = new String[file.length];
String saveFileNames[] = new String[file.length];
for (int i = 0, len = file.length; i < len; i++) {
String fileName = file[i].getOriginalFilename();
fileNames[i] = fileName;
String saveFileName = uploadFile(file[i]);
saveFileNames[i] = saveFileName;
}
Map<String, String> map = new HashMap<>();
map.put("fileNames", String.join(",", fileNames));
map.put("saveFileNames", String.join(",", saveFileNames));
return map;
}
}
spring:
servlet:
multipart:
#单个数据的大小
max-file-size: 100MB
#总数据的大小
max-request-size: 100MB
# 上传文件路径
file:
path: D://file/static/img
转存失败重新上传取消