uniapp图片上传说明

目录

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.savedFilePath
					resolve(item)
				},
				fail: () => {
					reject()
				}
			})

// 传入临时文件路径，返回保存的路径

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

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

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

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

参照:

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