目录
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() 前端+后端代码 - 简书
