聊一聊uniapp上传图片参数传不进去的原因和解决方法

1. 前言

在前端开发中，图片上传是常见的操作之一，而uniapp作为跨平台开发框架，也提供了方便的上传图片功能。但是在实际使用中，会遇到参数无法正确传递的问题。本文将围绕这个问题，从原因和解决方法两个方面进行详细讲解。

2. 问题描述

在使用uniapp上传图片时，如果需要传递参数，在成功回调函数中可以通过event参数获取参数值。但是很多开发者在使用过程中会发现，传递的参数值并不是自己所设定的，而是一些随机出现的字符或undefined。下面就展示一个具体的案例及其代码：

//前端代码
uni.uploadFile({
  url: 'http://example.com/upload',
  filePath: 'image.png',
  name: 'file',
  formData: {
    user: 'example'
  },
  success: function (res) {
    console.log(res.data); //输出参数值
  }
});
//后端代码
router.post('/upload', function (req, res) {
  console.log(req.body.user); //输出参数值
  res.send('success');
});

在上述代码中，我们通过formData参数传递了用户信息，然后在后端接口中打印参数值。但是实际结果却是不符合预期的，无法获取正确的参数值。

3. 问题原因

为什么会出现无法正确传递参数的问题呢？这是因为uniapp上传图片时采用了multipart/form-data格式，而这种格式在传递参数时是比较特殊的。

首先我们要知道，multipart/form-data格式在传递参数时，参数是以“boundary”分隔符分开的。每个参数都有一个名称(name)和一个值(value)，而这个值是以“boundary”分隔符作为参数的结尾标识的。

举个例子：在上传一张图片时，我们可以传递一些额外参数，比如上传人的ID、上传时间等。这些参数的格式如下：

Content-Disposition: form-data; name="id"
123456
--boundary
Content-Disposition: form-data; name="time"
2022-05-10 11:22
--boundary
Content-Disposition: form-data; name="file"; filename="test.jpg"
#图片的二进制文件#
--boundary--

我们可以看到，每个参数的格式都是以Content-Disposition开头，并附带name参数和value的值。而整个上传数据的结尾位置则是以“–boundary–”结尾。这样一来，后端就可以通过解析multipart/form-data格式的数据，得到每个参数对应的值了。

然而，对于uniapp上传图片，它实际上采用了类似于XMLHttpRequest无法使用setRequestHeader方式的内置API，在内部实现中并没有明确地设置“boundary”分隔符，而是固定使用了一条长度为25的随机字符串。这样的问题在上传单个文件时不多见，但在上传多个文件时由于boundary的长度不一致会导致某些请求被后端过滤掉，这种情况下多数情况下导致的原因就是重复使用boundary导致的

4. 解决办法

要解决这个问题，最好的办法就是自行生成boundary分隔符。这样一来，就可以避免随机字符串和boundary不一致的问题。下面就是一个自动生成boundary的示例代码：

function generateBoundary() {
  let boundary = '--------------------------';
  for (let i = 0; i < 24; i++) {
    boundary += Math.floor(Math.random() * 10).toString(16);
  }
  return boundary;
}
uni.uploadFile({
  url: 'http://example.com/upload',
  filePath: 'image.png',
  name: 'file',
  header: {
    'content-type': 'multipart/form-data; boundary=' + generateBoundary()
  },
  formData: {
    user: 'example'
  },
  success: function (res) {
    console.log(res.data);
  }
});

在这个示例中，我们定义了一个generateBoundary函数，用于生成长度为25的boundary分隔符。然后在上传文件时，我们将header中的content-type设置为multipart/form-data，同时附带boundary的值。

借助自动生成的boundary分隔符，我们就可以完美解决uniapp上传图片时随机字符串导致参数无法正确传递的问题了。

5. 总结

在本文中，我们探讨了uniapp上传图片时参数无法正确传递的问题，并详细介绍了问题的原因和解决方法。虽然uniapp上传图片的内部实现并没有提供设置boundary的接口，但是我们可以自行生成随机boundary来达到目的。如果你在使用uniapp上传图片时遇到了类似的问题，可以参考本文的解决方案。希望对读者有所帮助！