uniapp图片上传说明

目录

1.文件上传组件

2.单文件上传

3.多文件上传

4.图片的回显

5.注意点

---

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.图片的回显

图片上传之后，不管是保存在本地或者时文件服务器上，需要在列表页进行数据的查看和修改，就涉及到图片的显示。

要进行图片的回显，需要设置uni-file-picker组件中的v-model绑定的值，绑定的值的格式是一个对象数组。结构如下：

需要设置图片的url地址，名称及后缀。未上传的文件，设置图片执行保存房后返回的地址，已经上传至服务器的图片，设置服务器中的文件地址（文件服务器使用nginx进行代理）。

示例：

				formData.value = response.resBody;
				if (response.resBody.fileList) {
					for (const item of response.resBody.fileList) {
						fileInfo.value = [...fileInfo.value, {
							name: item.fileNm,
							extname: item.fileSuffix,
							url: item.fileLoca
						}]
					}
				}

5.注意点

①保存图片信息时需要调用图片保存的方法，将图片存储起来。因为选择之后返回的是图片的临时路径，一旦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() 前端+后端代码 - 简书