uni-app uni.uploadFile H5音频视频上传缺少后缀bug

在使用uni-app进行H5开发时，如果你遇到uni.uploadFile上传音频或视频文件缺少后缀名的bug，这通常是由于文件处理不当或者浏览器安全策略导致的。为了确保文件在上传时保留其原始后缀名，你可以采取以下措施：

1. 确保文件选择时包含后缀名

首先，确保在文件选择器中选中的文件包含后缀名。这通常不是问题，因为用户从文件系统中选择的文件默认会带有后缀名。

2. 在上传前检查文件后缀名

在上传文件之前，你可以通过JavaScript检查文件的后缀名，并确保它符合你的要求（例如，.mp3、.mp4等）。

3. 使用FormData进行文件上传

uni.uploadFile方法底层实际上是通过XMLHttpRequest或者Fetch API实现的。为了确保文件上传时保留后缀名，你可以直接使用FormData对象来构建上传数据。

以下是一个使用FormData和fetch API上传文件的示例代码：

// 假设你有一个file元素，用户通过它选择了文件
const fileInput = document.querySelector('#fileInput');

fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 检查文件后缀名
  const validExtensions = ['mp3', 'mp4'];
  const fileExtension = file.name.split('.').pop().toLowerCase();
  if (!validExtensions.includes(fileExtension)) {
    alert('请选择一个有效的音频或视频文件！');
    return;
  }

  // 使用FormData构建上传数据
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('YOUR_UPLOAD_URL', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const result = await response.json();
      console.log('上传成功:', result);
    } else {
      console.error('上传失败:', response.statusText);
    }
  } catch (error) {
    console.error('上传过程中发生错误:', error);
  }
});

4. 注意事项

• 确保YOUR_UPLOAD_URL替换为你的实际上传服务器地址。
• 上面的代码示例使用了fetch API，你也可以根据需要替换为XMLHttpRequest。
• 在实际开发中，你可能还需要处理文件大小限制、上传进度显示等额外功能。

通过以上方法，你应该能够解决在H5中使用uni-app上传音频或视频文件时缺少后缀名的问题。