@ApiOperation("文件上传") @PostMapping("/upload") public ResultInfo upload( @ApiParam("上传文件实体") @RequestParam(required = true) MultipartFile upload, @ApiParam("0") @RequestParam(required = false, defaultValue = "") String duanyu, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") Integer taskId, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") Integer testContentId, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") Integer detailId, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") Integer pointId, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") double longitude, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") double latitude, @ApiParam("0不合格,1:合格") @RequestParam(required = false, defaultValue = "1") Integer qual, @ApiParam("0:验证文件类型,1:为不验证类型,默认为1") @RequestParam(required = false, defaultValue = "1") Integer noValidateType, @ApiParam("0") @RequestParam(required = false, defaultValue = "0") Integer userId) { return service.uploadFile(upload,duanyu,taskId,pointId,testContentId, detailId,qual,noValidateType,longitude,latitude, userId); }帮我把上传单张照片改为上传多张
时间: 2023-07-19 16:17:59 浏览: 236
图片多文件上传
4星 · 用户满意度95%
好的,可以根据前面提到的三种方法之一将单张图片上传改为上传多张图片,以下是一种可能的实现方式:
1. 使用 HTML5 的 multiple 属性:
将原来的:
```java
@ApiParam("上传文件实体") @RequestParam(required = true) MultipartFile upload
```
修改为:
```java
@ApiParam("上传文件实体") @RequestParam(required = true) MultipartFile[] uploads
```
然后在前端的表单中添加 multiple 属性:
```html
<input type="file" name="uploads" multiple>
```
在后端的方法中,遍历上传的文件数组,逐个调用 service.uploadFile 方法进行处理。
2. 使用插件/库:
可以使用一些现成的上传插件或库,例如 Dropzone.js、Fine Uploader、Web Uploader 等。这些插件或库通常提供了丰富的配置选项,可以满足不同的需求。例如,使用 Dropzone.js 可以这样实现:
在前端引入 Dropzone.js:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
```
然后在表单中添加一个 div,用于显示上传区域:
```html
<div id="my-dropzone" class="dropzone"></div>
```
在 JavaScript 中初始化 Dropzone:
```js
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
url: "/upload", // 后端接口地址
paramName: "uploads", // 参数名
maxFilesize: 2, // 最大文件大小,单位 MB
maxFiles: 5, // 最大文件数
acceptedFiles: "image/*", // 允许上传的文件类型
dictDefaultMessage: "将文件拖到此处或点击上传", // 默认提示信息
dictFileTooBig: "文件大小不能超过 {{maxFilesize}}MB", // 文件大小超限提示信息
dictInvalidFileType: "不支持上传该类型文件", // 文件类型不支持提示信息
dictMaxFilesExceeded: "最多只能上传 {{maxFiles}} 个文件", // 文件数超限提示信息
init: function() {
this.on("success", function(file, response) {
console.log("上传成功");
});
this.on("error", function(file, message) {
console.log("上传失败:" + message);
});
}
});
```
在后端的方法中,仍然需要将原来的:
```java
@ApiParam("上传文件实体") @RequestParam(required = true) MultipartFile upload
```
修改为:
```java
@ApiParam("上传文件实体") @RequestParam(required = true) MultipartFile[] uploads
```
然后遍历上传的文件数组,逐个调用 service.uploadFile 方法进行处理。
以上只是其中一种实现方式,具体可以根据实际需求和技术栈进行选择和实现。
阅读全文