天天看點

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());
        }
    }           

繼續閱讀