凌云网小说,企业网站做优化,搜索排名广告营销,郑州设计网站公司目录 1.文件上传组件
2.单文件上传
3.多文件上传
4.注意点 1.文件上传组件
前端上传组件使用uni-file-picker#xff0c;可以自行进行下载使用。默认上传到绑定的服务空间#xff0c;配置属性auto-upload为false关闭自动上传#xff0c;可以限定上传的是图片还是文件可以自行进行下载使用。默认上传到绑定的服务空间配置属性auto-upload为false关闭自动上传可以限定上传的是图片还是文件具体的可以参照官方文档。总共有5个事件如果不使用自动上传只需要select事件和delete事件即可select事件获取选择的图片信息可以配置选择一个或者多个。delete事件获取删除的图片信息。图片的上传示例如下 uni-forms-item label现场照片 classuni-form-itemuni-file-picker reffilePicker v-modelfileInfo file-mediatypeimage modegridfile-extnamepng,jpg :limit6 selectselect deletedeleteFile return-typearray:auto-uploadfalse //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;MapString, MultipartFile map mulReq.getFileMap();ListMultipartFile resultList new ArrayList();if(!map.isEmpty()){for (Map.EntryString, 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() 前端后端代码 - 简书
