uni-app多文件上传后端Node.js多文件接收

uni-app 代码

场景是H5环境和App环境

选择图片代码（uniapp 代码示例）

选择图片代码以及文档

uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
    }
});

上传图片以及文档

tempFilePaths 为选择图片res 里面的其中一个对象
注意：uniapp 上传图片不能上传选中的File 文件（tempFiles这个数组的东西不能够上传） 要上传（tempFilePaths）读取图片后数组的 此数组可以用来浏览，上传
选择图片加上传图片代码

*多图上传注意 files 数组 对象不能直接传 tempFilePaths这个数组 必须要更改

	let img = [];
		for (let i = 0; i < tempFilePaths.length; i++) {
			  let obj = new Object();
			  obj.name = `file` + i;
			  obj.uri = tempFilePaths[i];
			  img.push(obj);
			  obj = null;
			}

uniapp 全部代码

		uni.chooseImage({
					count: 9,
					success: (res) => {
			
						//上传文件的临时路径
						const tempFilePaths = res.tempFilePaths;
						let img = [];
						for (let i = 0; i < tempFilePaths.length; i++) {
						  let obj = new Object();
						  obj.name = `file` + i;
						  obj.uri = tempFilePaths[i];
						  img.push(obj);
						  obj = null;
						}					
						const tempFilePaths = res.tempFilePaths;
						console.log(res);
						uni.uploadFile({
						url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles,
							filePath: tempFilePaths[0],
							files: img ,
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes)
								uni.hideLoading();
								if (back.status == "0") {
									console.log(that.host + back.filepath[0])
									that.editorCtx.insertImage({
										src: that.host + back.filepath[0],
										alt: '图像',
										success: function() {}
									})
								} else {
									console.log(back.msg);
								}
							},
							fail: () => {
								uni.hideLoading();
								console.log('图片上传失败，请联系开发');
							}
						});
					}
				})

Node后端

1. npm install multer
2. npm i express

var express = require("express"); //Express框架
const multer = require("multer"); // multer中间件上传图片 接收文件post数据

// 设置文件上传的地方
let storage = multer.diskStorage({
  destination: (req: any, file: any, cb: Function) => {

    cb(null, "./StaticResource/pudate/");
  },
  filename: (req: any, file: any, cb: Function) => {

    cb(null, Date.now() + "-" + file.originalname);
  },
});

let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上传的文件
app.use(multerObj.any()); // 存放所有的类型文件



//设置跨域访问
app.all("*", (req: any, res: any, next: Function) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild"
  );
  res.header(
    "Access-Control-Allow-Headers",
    "content-type,SelfSummerHeader,Authorization"
  ); //自定义请求头
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", "3.2.1");
  res.header("Content-Type", "application/json;charset=UTF-8");
  res.header("Content-Type", "text/xml");

  if (req.method === "OPTIONS" || req.url === "/favicon.ico") {
    // 拦截请求
    return res.send();
  }
  next();
});

app.listen(COMPort, (err: Error) => {
  if (err) {
    console.log('启动错误', err)
  }

  console.table({
    端口: COMPort,
    IP: systemOs.IP(),
    服务地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`,
    静态资源: `IP端口地址加上文件名`,
    描述: `Node服务已启动成功`,
    "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代码转为js代码可以正常使用)`,
  });

  // 挂载自定义中间件
  app.use(middleware_router.bodyData);
});



router.all(
  "/pudatefiles",
  (req: { files: { path: string }[] }, res: any, next: any) => {
    let data: Array<string> = [];
    console.log(req.files);
    req.files?.forEach((item: any) => {
      let url = item?.path.replace(/\\/g, "/");
      data.push(url?.replace("StaticResource", ""));
    });
    res.sendSuccess(data, "上传成功");
  }
);

微信小程序多图上传

使用以上代码不能完成多图上传
原因，微信小程序不支持多图上传 或者是 说 uni.uploadFile 这个API 在小程序不支持多文件上传
小程序解决办法
循环上传选中的文件，当全部成功则返回成功 使用 Promise.all 或者是能执行数组里面的所 Promise 深入理解Promise以及最新方法
根据不同端使用不同上传代码 使用 uniapp 条件编译

 /**
   * uniapp 多图上传方法
   * Interface,地址
   * filePath,文件数组,
   * formData, 额外的参数
   * name NodeJS 服务获取的KEY
   */
  const updateFile=(Interface: string, files: any, formData: {}, name = "fileList")=> {
    let url = `请求域名`;

    return new Promise((resolve, reject) => {

      // #ifdef MP-WEIXIN
      // 微信文件上传方法封装uploadFile函数
      const wxupload = (img: any) => {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            //参数可查看官方文档
            url,
            filePath: img,
            name: 'file',
            header: {
              "Content-Type": "multipart/form-data",
              "accept": 'application/json'
            },
            success: (res) => {
              resolve(res)
            }
          })
        })
      }

	//因为选择的是多文件 这个 files 是一个数组 使用map的特性 返回一个数组的 Promise
      const all = files.map((file: any) => wxupload(file.url || file.path))
      const statusCode: any[] = [], allFiledata: any[] = [];
      uni.showLoading({
        title: '上传中..'
      });
		
		// 使用   Promise.all 去执行	all 里面所有得Promise上传函数
      Promise.all(all).then(res => {
        try {
          for (let i = 0; i < res.length; i++) {
            const element: any = res[i];
            const alldata = JSON.parse(element.data);
            allFiledata.push(...alldata.data)
            statusCode.push(element.statusCode) // http 状态码
            statusCode.push(alldata.code) // 后端上传文件返回的状态码
          }
			// 使用 ES6 every 语法，当数组所有状态码为200就为成功，一个失败者所有失败 （这里后端上传成功也是返回得200能够跟http的200 一样，所有这里能够用 every 函数）
          if (statusCode.every(i => i === 200)) {
            resolve(allFiledata)
          } else {
            Toast('上传文件失败')
            reject([]);
          }
        } catch (error) {
          Toast('上传文件失败')
          reject(error);
        }
        uni.hideLoading()
      }).catch(() => {
        uni.hideLoading()
        Toast('上传文件失败')
      })
      //#endif



			
      // #ifndef  MP-WEIXIN
      // 需条件编译的代码 除了小程序的代码
      uni.showLoading({
        title: '上传中'
      });
      const uploadTask = uni.uploadFile({
        url,
        files,
        name,
        formData,
        success: (uploadFileRes: UniApp.UploadFileSuccessCallbackResult) => {
          let {
            statusCode,
            data
          } = uploadFileRes;
          let dataType = '';
          try {
            dataType = typeof JSON.parse(data)
          } catch (e) {
            dataType = 'string'
          }

          if (statusCode === 200) {
            let setverData = dataType === 'object' ? JSON.parse(data) : data;
            setverData.code === 200 ? resolve(setverData.data) : Toast(setverData.msg);
          } else {
            Toast(data.msg);
          }
        },
        file: (err: Error) => {
          reject(err);
        },
        complete() {
          uni.hideLoading()
        }
      });
      console.log(uploadTask);
      //#endif
    });
  }