uniapp 多文件上传 uni.uploadFile 前端 + 后台代码

最编程 2024-05-01 20:51:38

...

1、前端官方文档：https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
一、多文件上传参数falePath、name不必填写

image

二、files数组由Object组成！！！（不是filePath！！！！！！）

image

三、前端代码：

image

2、后端代码

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

image

前端：

function uploadFiles(folderId) {
    return new Promise((resolve, reject) => {
        let comment_sql = squel.select().from('Comment').where('folderId = ?', folderId).toString();
        let action =  dynamicDb.queryData(comment_sql);
        action.then(commentList =>{
          console.log(commentList)
          
          if (commentList.length > 0) {
              try {
                  let filePathArr = [];
                  let files = [];
                  commentList.forEach(async i => {
                      let sb = await sbFun(i.url).catch((err) =>{console.error(err)});
                      filePathArr.push(sb)
                      isHave(sb);
                      files.push({
                           "name":i.name,
                           "uri":sb
                      })
                  })
                  setTimeout(()=>{
                      if(filePathArr.length > 0){
                        let commentJson = JSON.stringify(commentList);
                        uni.uploadFile({
                            url: uploadFilesUrl,
                            files: files,
                            // name: 'file',
                            formData: {
                                "coreFileListStr":commentJson,
                            },
                            success: (res) => {
                                console.info(res)
                                if (res.statusCode == 200) {
                                    resolve('success')
                                  } else {
                                    if (res.data.message) {
                                        reject('上传附件失败：' + res.data.message)
                                    } else {
                                        reject('上传附件失败，网络异常：' + res.statusCode)
                                    }
                                }
                            },
                            fail: (err) => {
                                console.error(err)
                                reject('上传附件失败，' + err.errMsg)
                            },
                            complete: () => {
                                console.log("上传结束")
                            }
                        })
                      }
                  },300)
              } catch (err) {
                  //TODO handle the exception
                  console.error(err)
                  try {
                      err = JSON.stringify(err)
                  } catch (err) {
                      //TODO handle the exception
                  }
                  reject('上传附件失败，' +  err)
              }
          }else{
              //无附件信息
              resolve('none files')
          }  
        })
    })
}

后端：

    @Log(value = "上传项目附件", type = LogType.INSERT)
    @RequestMapping(value = "/files/upload", method = RequestMethod.POST)
    void uploadProjectFile(@RequestParam("coreFileListStr") String coreFileListStr, HttpServletRequest request){
        CommonsMultipartResolver commonsMultipartResolver =new CommonsMultipartResolver(request.getSession().getServletContext());
        commonsMultipartResolver.setDefaultEncoding("utf-8");
        if (commonsMultipartResolver.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());
                }
                uploadService.uploadProjectFile(coreFileListStr,resultList);
            }
        }
    }

上一篇：在 Spring Boot 中实现文件上传和下载

下一篇： SWFUpload 用户指南