uni-app 使用uni.downloadFile()方法下载附件时，若附件名包含#等字符且附件为PNG，下载后变为bin文件无法查看

在使用 uni.downloadFile() 方法下载附件时，如果附件名包含特殊字符（如 #）且附件为 PNG 格式，下载后文件变为 .bin 文件无法查看，通常是由于文件名解析或保存路径的问题导致的。以下是一些可能的原因和解决方案：

1. 文件名包含特殊字符

文件名中的特殊字符（如 #、?、& 等）可能导致文件保存时路径解析错误，从而无法正确保存为 PNG 文件。

解决方案：

在保存文件时，对文件名进行规范化处理，去除或替换特殊字符。例如：

const fileName = "example#file.png"; // 原始文件名
const safeFileName = fileName.replace(/[#?&]/g, "_"); // 替换特殊字符为下划线

uni.downloadFile({
  url: "https://example.com/path/to/file.png", // 文件 URL
  success: (res) => {
    if (res.statusCode === 200) {
      // 保存文件
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        filePath: `${wx.env.USER_DATA_PATH}/${safeFileName}`,
        success: (saveRes) => {
          console.log("文件保存成功:", saveRes.filePath);
        },
        fail: (err) => {
          console.error("文件保存失败:", err);
        },
      });
    }
  },
  fail: (err) => {
    console.error("文件下载失败:", err);
  },
});

2. 文件类型未正确识别

如果下载的文件未正确识别为 PNG 格式，可能会导致文件保存为 .bin 文件。

解决方案：

确保下载的文件类型正确，并在保存时指定正确的文件扩展名。例如：

uni.downloadFile({
  url: "https://example.com/path/to/file.png", // 文件 URL
  success: (res) => {
    if (res.statusCode === 200) {
      // 保存文件时指定扩展名为 .png
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        filePath: `${wx.env.USER_DATA_PATH}/file.png`, // 确保扩展名为 .png
        success: (saveRes) => {
          console.log("文件保存成功:", saveRes.filePath);
        },
        fail: (err) => {
          console.error("文件保存失败:", err);
        },
      });
    }
  },
  fail: (err) => {
    console.error("文件下载失败:", err);
  },
});

3. 临时文件路径问题

uni.downloadFile() 下载的文件会保存为临时文件，如果未正确处理临时文件路径，可能会导致文件保存失败或保存为 .bin 文件。

解决方案：

确保使用 res.tempFilePath 作为保存文件的源路径，并正确保存到目标路径。例如：

uni.downloadFile({
  url: "https://example.com/path/to/file.png", // 文件 URL
  success: (res) => {
    if (res.statusCode === 200) {
      // 保存临时文件
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        filePath: `${wx.env.USER_DATA_PATH}/file.png`,
        success: (saveRes) => {
          console.log("文件保存成功:", saveRes.filePath);
        },
        fail: (err) => {
          console.error("文件保存失败:", err);
        },
      });
    }
  },
  fail: (err) => {
    console.error("文件下载失败:", err);
  },
});

4. 检查文件 MIME 类型

如果服务器未正确设置文件的 MIME 类型（如 image/png），可能会导致文件类型识别错误。

解决方案：

在下载文件后，检查文件的 MIME 类型，并根据类型手动设置文件扩展名。例如：

uni.downloadFile({
  url: "https://example.com/path/to/file.png", // 文件 URL
  success: (res) => {
    if (res.statusCode === 200) {
      // 获取文件类型
      uni.getFileInfo({
        filePath: res.tempFilePath,
        success: (infoRes) => {
          const mimeType = infoRes.mimeType; // 获取 MIME 类型
          let extension = ".png"; // 默认扩展名
          if (mimeType === "image/png") {
            extension = ".png";
          } else if (mimeType === "image/jpeg") {
            extension = ".jpg";
          }
          // 保存文件
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            filePath: `${wx.env.USER_DATA_PATH}/file${extension}`,
            success: (saveRes) => {
              console.log("文件保存成功:", saveRes.filePath);
            },
            fail: (err) => {
              console.error("文件保存失败:", err);
            },
          });
        },
      });
    }
  },
  fail: (err) => {
    console.error("文件下载失败:", err);
  },
});