天天看点

uniapp多文件上传 uni.uploadFile() 前端+Springboot后端

作者:程序猿辉子

1、前端官方文档:uni.uploadFile(OBJECT) | uni-app官网

一、多文件上传参数falePath、name不必填写

uniapp多文件上传 uni.uploadFile() 前端+Springboot后端

二、files数组 由Object组成!!!,所以如果是多文件上传,files、(filePah,name)二选其一。

uniapp多文件上传 uni.uploadFile() 前端+Springboot后端

三、前端代码:

uniapp多文件上传 uni.uploadFile() 前端+Springboot后端

四、后端代码

接收formData内容,请求信息中获取MultipartFile信息

uniapp多文件上传 uni.uploadFile() 前端+Springboot后端

五代码部分

前端:

uni.uploadFile({//该上传仅为示例,可根据自己业务修改或封装,注意:统一上传可能会导致服务器压力过大
					url: `${this.$mConfig.baseUrl}`+'/uploads', //仅为示例,非真实的接口地址
					files:images,//有files时,会忽略filePath和name
					// name: 'files',
					// formData: {//后台以post方式接收
					//   "files":images
					// },
					success: (uploadFileRes) => {
									let file=JSON.parse(uploadFileRes.data);
						this.$http
							.post(`${publishPost}`,{
								"customerId":this.userInfo.id,
								"contentText":this.input_content,
								"contentUrl": file.urls,
							})
							.then(r => {
								uni.hideLoading();
								uni.showToast({
									icon:'success',
									title:"发布成功"
								})
								uni.navigateBack({//可根据实际情况使用其他路由方式
									delta:1
								});

							});

					},
					fail: (e) => {
						console.log("e: " + JSON.stringify(e));
						uni.hideLoading();
						uni.showToast({
							icon:'none',
							title:"发布失败,请检查网络"
						})
					}
				});           

后端:

@PostMapping("/uploads")
    @UnAuth
    public AjaxResult uploadFiles(HttpServletRequest request) throws Exception
    {
        MultipartHttpServletRequest req=(MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = req.getFileMap();
        try
        {
            // 上传文件路径
            String filePath = smartfarmConfig.getUploadPath();
            List<String> urls = new ArrayList<String>();
            List<String> fileNames = new ArrayList<String>();
            List<String> newFileNames = new ArrayList<String>();
            List<String> originalFilenames = new ArrayList<String>();
            List<MultipartFile> resultList = new ArrayList<>();
            if (!fileMap.isEmpty()){
                for(Map.Entry<String,MultipartFile> result : fileMap.entrySet()){
                    resultList.add(result.getValue());
                }
            }
            for (MultipartFile file : resultList)
            {
                // 上传并返回新文件名称
                String fileName = FileUploadUtils.upload(filePath, file);
                String url = serverConfig.getUrl() + fileName;
                urls.add(url);
                fileNames.add(fileName);
                newFileNames.add(FileUtils.getName(fileName));
                originalFilenames.add(file.getOriginalFilename());
            }
            AjaxResult ajax = AjaxResult.success();
            ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));
            ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));
            ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));
            ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }           

继续阅读