UniApp 中 uni.uploadFile 文件上传踩坑

介绍

在 UniApp 开发中，我们常常会碰到需要实现文件上传的需求。而 uni.uploadFile 是 UniApp 提供的一个用于文件上传的 API。然而，在使用这个 API 过程中，我们可能会遇到一些坑，本文将介绍一些在使用 uni.uploadFile 过程中需要注意的问题，并给出相应的解决方案。

坑一：文件路径问题

在使用 uni.uploadFile 上传文件时，我们需要指定文件的相对路径。然而，我们无法直接获取文件的相对路径，这也就导致了我们无法直接使用 uni.uploadFile 上传文件。

解决方案

我们可以通过调用 uni.chooseImage 接口选择图片，并将选择的图片存储到指定目录下，然后再使用 uni.uploadFile 将该图片上传。

uni.chooseImage({
  count: 1,
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    var filePath = tempFilePaths[0];
    var fileName = 'myImage.jpg';
    var uploadUrl = 'https://example.com/upload';
    
    uni.saveFile({
      tempFilePath: filePath,
      success: function (res) {
        var savedFilePath = res.savedFilePath;
        uni.uploadFile({
          url: uploadUrl,
          filePath: savedFilePath,
          name: 'file',
          formData: {
            'fileName': fileName
          },
          success: function (res) {
            console.log('upload success');
          },
          fail: function (res) {
            console.log('upload fail');
          }
        });
      }
    });
  }
});

如上所示，在成功选择图片后，我们先使用 uni.saveFile 将图片保存到特定目录下，然后再使用 uni.uploadFile 将该图片上传。

坑二：上传文件格式问题

在使用 uni.uploadFile 上传文件时，我们需要指定文件的格式。然而，如果文件格式不正确，上传可能会失败。

解决方案

我们可以通过判断文件的格式，来确保上传的文件格式正确。以下是一个示例，演示了如何判断并上传 jpg 格式的文件。

uni.chooseImage({
  count: 1,
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    var filePath = tempFilePaths[0];
    var fileName = 'myImage.jpg';
    var uploadUrl = 'https://example.com/upload';
    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
    
    if (ext != 'jpg') {
      console.log('File type not supported');
      return;
    }
    
    uni.saveFile({
      tempFilePath: filePath,
      success: function (res) {
        var savedFilePath = res.savedFilePath;
        uni.uploadFile({
          url: uploadUrl,
          filePath: savedFilePath,
          name: 'file',
          formData: {
            'fileName': fileName
          },
          success: function (res) {
            console.log('upload success');
          },
          fail: function (res) {
            console.log('upload fail');
          }
        });
      }
    });
  }
});

如上所示，在选择图片后，我们通过判断文件的后缀名来确保上传的文件格式正确。

坑三：跨域问题

在使用 uni.uploadFile 上传文件时，由于上传操作是跨域的，可能会遇到跨域问题。

解决方案

在遇到跨域问题时，可以通过服务器端进行配置，允许跨域请求。

结论

在 UniApp 中使用 uni.uploadFile 上传文件时，需要注意文件路径、文件格式和跨域问题。通过本文介绍的解决方案，我们可以更好地利用 uni.uploadFile 实现文件上传功能。

希望本文能帮助到大家。谢谢阅读！

本文来自极简博客，作者：心灵捕手，转载请注明原文链接：UniApp 中 uni.uploadFile 文件上传踩坑