请问如何将uniapp这个临时的文件地址转换为Web API的File对象呢？

Question

我们知道uniapp中一般选择文件，是存储的一个临时的地址：
例如：

"path": "blob:http://localhost:5173/fe79d681-85b7-4261-9e65-ba4d68cf0b83",

1、请问如何将这个临时的地址转换为Web API的File对象呢？
2、这个Web API的File对象，是否是微信小程序，支付宝小程序等使用axios上传时候都可以进行使用？

Answer 1

小程需要用微信的文件上传API，然后选择好文件之后返回一个临时地址，直接请求后端就好了。
并不是之前你开发web时使用 input:file 选择文件后获取到 blob 对象然后通过 axios + multipart/form-data 来上传文件。

具体看微信文档 👇

• 网络 / 上传 / wx.uploadFile
• 媒体 / 视频 / wx.chooseMedia
• 媒体 / 图片 / wx.chooseMessageFile

支付宝小程序应该也是类似的情况。但是看你是使用的 uni-app 开发，所以看这里 👉 uni.uploadFile(OBJECT) | uni-app官网

Answer 2

UniApp 中实现将临时文件地址转换为 Web API 的 File 对象，并在微信小程序和支付宝小程序中使用 axios 上传：

1. 将临时地址转换为 File 对象

首先，通过 fetch API 获取 Blob 数据，然后创建 File 对象：

async function urlToFile(url, filename, mimeType) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new File([blob], filename, { type: mimeType });
}

// 示例使用
const tempUrl = "blob:http://localhost:5173/fe79d681-85b7-4261-9e65-ba4d68cf0b83";
urlToFile(tempUrl, "example.png", "image/png").then(file => {
  console.log(file);
});

2. 在微信小程序和支付宝小程序中使用 File 对象上传

微信小程序

通过 wx.uploadFile 接口上传文件：

wx.chooseImage({
  success: function(res) {
    const tempFilePath = res.tempFilePaths[0];
    wx.uploadFile({
      url: 'https://example.com/upload', // 上传接口地址
      filePath: tempFilePath,
      name: 'file',
      success: function(uploadRes) {
        console.log('上传成功', uploadRes);
      },
      fail: function(err) {
        console.error('上传失败', err);
      }
    });
  }
});

支付宝小程序

通过 my.uploadFile 接口上传文件：

my.chooseImage({
  success: function(res) {
    const tempFilePath = res.apFilePaths[0];
    my.uploadFile({
      url: 'https://example.com/upload', // 上传接口地址
      filePath: tempFilePath,
      name: 'file',
      success: function(uploadRes) {
        console.log('上传成功', uploadRes);
      },
      fail: function(err) {
        console.error('上传失败', err);
      }
    });
  }
});

3. 使用 axios 上传文件

如果你需要在 Web 环境中使用 axios 上传文件，可以直接使用 FormData 对象：

const formData = new FormData();
formData.append('file', file);

axios.post('https://example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('上传成功', response);
}).catch(error => {
  console.error('上传失败', error);
});