开发
API

tt.uploadFile

从基础库 1.0.0 开始支持

将本地文件上传到网络。 网络相关的 API 在使用前需要配置域名白名单。请参考网络请求使用说明。客户端发起一个 HTTPS POST 请求,其中 content-typemultipart/form-data

语法

tt.uploadFile(options)

参数说明

options 为 Object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
urlstring--目标地址1.0.0
filePathstring--本地文件路径1.0.0
namestring--HTTP 请求的文件名1.0.0
headerobject{'content-type': 'multipart/form-data'}请求 Header1.0.0
formDataobject--请求额外参数1.0.0
successfunction--接口调用成功的回调函数1.0.0
failfunction--接口调用失败的回调函数1.0.0
completefunction--接口调用结束的回调函数(调用成功、失败都会执行)1.0.0

referer 说明

网络请求 header 中的 referer 不可设置。 其固定格式为:https://tmaservice.developer.toutiao.com?appid={appid}&version={appVersion},其中 appid为小程序的 APPID,appVersion为小程序的版本号。

user-agent 说明

网络请求 header 中的 user-agent 不可设置。 其固定格式分为:

  • IOS 系统:[系统user-agent] [宿主标识]/[宿主app版本] ToutiaoMicroApp/[基础库版本] webview/[插件版本]
  • Android 系统:[系统user-agent] [宿主标识]/[宿主app版本] ToutiaoMicroApp/[基础库版本] PluginVersion/[插件版本]

回调成功

Object 类型,属性如下:

参数参数类型说明最低支持版本
datastring返回数据1.0.0
statusCodenumber返回 HTTP 状态码1.0.0

回调失败

Object 类型,属性如下:

参数参数类型类型最低支持版本
errMsgstring错误信息1.0.0

返回值

UploadTask(上传任务对象),调用 tt.uploadFile 后返回的请求对象。

效果示例

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<!-- index.ttml -->
<view class="card-area">
  <view class="display-area">
    <image
      tt:if="{{filePath}}"
      class="image-items"
      src="{{filePath}}"
      mode="aspectFit"
    ></image>
  </view>
  <view class="button-area">
    <button tt:if="{{filePath}}" type="primary" bindtap="uploadFile">
      点击上传
    </button>
    <button tt:else type="primary" bindtap="chooseImage">选择图片</button>
  </view>
</view>
Page({
  data: {
    filePath: "",
  },
  chooseImage() {
    tt.chooseImage({
      sourceType: ["album"],
      count: 1, // 限制选择文件数
      success: (res) => {
        console.log("res", res);
        this.setData({
          filePath: res.tempFilePaths[0],
        });
      },
      fail(res) {
        console.log(`chooseImage调用失败`);
      },
    });
  },
  uploadFile() {
    if (!this.data.filePath) {
      return;
    }
    const id = "";
    tt.uploadFile({
      url: "someurl",
      filePath: this.data.filePath, // 上传文件的地址
      name: "filaname",
      header: {
        "content-type": "multipart/form-data",
        cookie: "TOUTIAOID" + id, // 此处添加cookie
      },
      formData: {
        user: "test",
      },
      success: (res) => {
        console.log("上传成功", res);
      },
      fail: (err) => {
        console.log("上传失败", err);
      },
    });
  },
});

Bug & Tip

  • Tip:header 不支持设置 refereruser-agentcontent-type 字段字段。
  • Tip:目前 tt.uploadFile 上传文件大小限制为 10M。
  • Tip:目前 tt.uploadFile 暂不支持多文件上传,一次只能上传一个文件。
  • Tip:线上版本只支持 HTTPS 协议的请求,测试版同时支持 HTTP 和 HTTPS 协议,请注意提审版本中的协议配置。
点击纠错
评价此篇文档