目录

1.文件上传组件

2.单文件上传

3.多文件上传

4.注意点

---

1.文件上传组件

前端上传组件使用uni-file-picker，可以自行进行下载使用。默认上传到绑定的服务空间，配置属性auto-upload为false关闭自动上传，可以限定上传的是图片还是文件，具体的可以参照官方文档。总共有5个事件，如果不使用自动上传，只需要select事件和delete事件即可，select事件获取选择的图片信息，可以配置选择一个或者多个。delete事件获取删除的图片信息。图片的上传示例如下：

			<uni-forms-item label="现场照片" class="uni-form-item"><uni-file-picker ref="filePicker" v-model="fileInfo" file-mediatype="image" mode="grid"file-extname="png,jpg" :limit="6" @select="select" @delete="deleteFile" return-type="array":auto-upload="false" /></uni-forms-item>

	const select = async (e : any) => {e.tempFiles.forEach((item : any) => {fileInfo.value.push({name: item.name,extname: item.extname,url: item.url,fileType: item.fileType,image: item.image,path: item.path,size: item.size,uuid: item.uuid,status: item.status,cloudPath: item.cloudPath});})}const deleteFile = async (e : any) => {const num = fileInfo.value.findIndex((item : any) => item.url == e.tempFilePath)fileInfo.value.splice(num, 1);// 删除本地存储的图片uni.removeSavedFile({filePath:e.tempFilePath,})}

select方法将获取选择的图片信息，存储到fileInfo数组中；delete方法，获取要删除的图片信息，然后将存储在fileInfo数组中的图片删除。

2.单文件上传

官方文档：uni.uploadFile(OBJECT) | uni-app官网

使用uni.uploadFile方法进行文件上传。 

前端：

		uni.uploadFile({url: 'http://10.1.36.39:8098/xxxx/file/upload',header: {'Content-Type': 'multipart/form-data',},filePath: '_doc/uniapp_save/17024591291590.png',name: 'file',formData: {userId: '123'},success: function (res) {console.log('上传成功')},fail: function (err) {console.log('上传失败', JSON.stringify(err));}})

 后端：

    @ApiOperation(value = "上传文件数据接口")@PostMapping(value = "/upload")public String upload(@RequestPart(value = "file") MultipartFile file) {RtnBean rtnBean = sftpService.uploadFile(file);
}

单文件上传，filePath和name必须填写。filePath是要上传文件的路径，name属性的内容和后端接口中的参数名一致。

后端可以通过@RequestParam(value = "userId") String userId，来接收formData中的内容。

3.多文件上传

前端

		uni.uploadFile({url: 'http://10.1.36.39:8098/xxxx/file/upload',header: {'Content-Type': 'multipart/form-data',},files: [{ name: '123', uri: '_doc/uniapp_save/17024591291590.png' }, { name: '123', 'uri': '_doc/uniapp_save/17024591291601.png' }],formData: {userId: '123'},success: function (res) {console.log('上传成功')},fail: function (err) {console.log('上传失败', JSON.stringify(err));}})

后端：

    @ApiOperation(value = "上传文件数据接口")@PostMapping(value = "/upload")    
public String upload(HttpServletRequest request) {CommonsMultipartResolver commonsMultipartResolve = new CommonsMultipartResolver(request.getSession().getServletContext());commonsMultipartResolve.setDefaultEncoding("utf-8");if(commonsMultipartResolve.isMultipart(request)){MultipartHttpServletRequest mulReq = (MultipartHttpServletRequest) request;Map<String, MultipartFile> map = mulReq.getFileMap();List<MultipartFile> resultList = new ArrayList<>();if(!map.isEmpty()){for (Map.Entry<String, MultipartFile> result : map.entrySet()) {resultList.add(result.getValue());}System.out.println(resultList.size());}}
}

 多文件上传要使用files设置文件的信息。files的格式如下：

注意上传多个文件时，uri是文件路径，必须设置。name是文件的名字，上传多个文件时，名字必须设置，并且不能重复，如果存在3重复名字的文件，后端只能获取到一个。 

后端直接从request中获取前端传递的文件信息，也可以通过@RequestParam(value = "userId") String userId，来接收formData中的内容。

4.注意点

①保存图片信息时需要调用图片保存的方法，将图片存储起来。因为选择之后返回的是图片的临时路径，一旦app关闭，如果图片没有上传到服务器的话，会导致之前上传的图片无法显示，临时文件的生命周期是在app运行时生效，关闭则失效。存储方法如下：

			uni.saveFile({tempFilePath: item.url,success: (res) => {item.url = res.savedFilePathresolve(item)},fail: () => {reject()}})// 传入临时文件路径，返回保存的路径

②文件上传到服务器后，需要调用删除方法，将上面保存的文件或图片删除掉。避免一致占用手机的存储空间。

		// 删除本地存储的图片uni.removeSavedFile({filePath:e.tempFilePath,})

③注意单文件上传和多文件上传时属性的设置。

④注意单文件上传和多文件上传时后端的文件接收方式及formData中的参数接收方式。

参照:

uniapp多文件上传 uni.uploadFile() 前端+后端代码 - 简书