React中用Axios和FormData传音视频至SQL数据库遇问题求助

关于MS SQL BLOB跨设备读取的问题 #

• MS SQL中存储的BLOB（如VARBINARY(MAX)类型）是原始二进制数据，本身不存在跨设备读取的兼容性问题，只要后端能正确将二进制数据转换为可访问的资源流即可。
• 实现方式：后端需要提供专门的接口，从数据库读取BLOB数据后，设置正确的Content-Type响应头（比如图片用image/jpeg、视频用video/mp4），并以文件流的形式返回数据。
• 前端处理：拿到后端返回的流后，可通过URL.createObjectURL(blob)生成可直接用于<img>或<video>标签的src地址，实现跨设备预览或下载。

关于Axios 415（不支持的媒体类型）错误 #

415错误核心原因是请求的媒体类型不被后端接口接受，结合你用FormData的场景，按以下步骤排查：

1. 取消手动设置Content-Type #

使用FormData时，不要手动设置Content-Type: multipart/form-data，Axios会自动生成包含边界符（boundary）的正确请求头，手动设置会丢失边界符导致后端无法解析。
错误写法：

axios.post('/api/property', formData, {
  headers: { 'Content-Type': 'multipart/form-data' } // 不要这么写
})

正确写法：

const formData = new FormData();
// 追加表单字段和文件
formData.append('propertyName', 'XX小区房源');
formData.append('coverImage', document.getElementById('imageInput').files[0]);
formData.append('tourVideo', document.getElementById('videoInput').files[0]);

// 直接发送，Axios自动处理请求头
axios.post('/api/property', formData)
  .then(res => console.log('提交成功', res))
  .catch(err => console.error('提交失败', err));

2. 检查后端接口配置 #

确保后端接口已经配置了multipart/form-data的解析支持：

• 若用ASP.NET Core：控制器方法需添加[FromForm]特性绑定参数，同时确保项目配置了文件上传支持

  [HttpPost("upload")]
  public async Task<IActionResult> UploadProperty([FromForm] PropertyUploadModel model)
  {
      // 处理文件和字段逻辑
      return Ok();
  }
  

• 若用Express(Node.js)：需引入multer中间件处理FormData

  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' });
  
  app.post('/api/property', upload.fields([{name: 'coverImage'}, {name: 'tourVideo'}]), (req, res) => {
      // req.files获取上传的文件，req.body获取表单字段
      res.send('上传成功');
  });
  

3. 验证FormData结构 #

确认FormData中追加的字段名与后端接口的参数名完全一致，比如后端接受的文件参数名是coverImage，前端就不能写成image。

内容的提问来源于stack exchange，提问作者fem-Ocean