uni.uploadFile(options) @uploadfile

展示全部

# uni.uploadFile(options)

将本地资源上传到开发者服务器。

# uploadFile 兼容性

Web	Android	iOS
4.0	3.9	4.11

推荐上传到uniCloud，uniCloud提供了更便宜CDN和更好的易用性，详见

# 参数

名称

类型

必填

默认值

兼容性

描述

options

UploadFileOptions

是

名称

类型

必备

默认值

兼容性

描述

url

string

是

开发者服务器 url

filePath

string

否

null

要上传文件资源的路径, 支持uni.env

name

string

否

null

文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

files

Array<UploadFileOptionFiles>

否

null

需要上传的文件列表。

名称

类型

必备

默认值

兼容性

描述

name

string

否

"file"

multipart 提交时，表单的项目名，默认为 file，如果 name 不填或填的值相同，可能导致服务端读取文件时只能读取到一个文件。

uri

string

是

要上传文件资源的路径

file

any

否

要上传的文件对象

header

UTSJSONObject

否

null

HTTP 请求 Header, header 中不能设置 Referer

formData

UTSJSONObject

否

null

HTTP 请求中其他额外的 form data

timeout

number

否

120000

超时时间，单位 ms

success

(result: UploadFileSuccess) => void

否

null

成功返回的回调函数

fail

(result: UploadFileFail) => void

否

null

失败的回调函数

complete

(result: any) => void

否

null

结束的回调函数（调用成功、失败都会执行）

# UploadFileSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

data

string

是

开发者服务器返回的数据

statusCode

number

是

开发者服务器返回的 HTTP 状态码

# UploadFileFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值	兼容性	描述
5	-	接口超时
1000	-	服务端系统错误
100001	-	json数据解析错误
100002	-	错误信息json解析失败
600003	-	网络中断
600008	-	data参数类型不合法
600009	-	URL格式不合法
602001	-	request系统错误

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 返回值

类型
UploadTask

# UploadTask 的方法

# abort(): void,

中断上传任务。

# abort 兼容性

Web	Android	iOS
4.0	3.9	4.11

# onProgressUpdate(callback: UploadFileProgressUpdateCallback): void,

监听上传进度变化。

# onProgressUpdate 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 参数

名称	类型	必填	默认值	兼容性	描述
callback	(result: OnProgressUpdateResult) => void	是	-	-	-

# OnProgressUpdateResult 的属性值

名称

类型

必备

默认值

兼容性

描述

progress

number

是

上传进度百分比

totalBytesSent

number

是

已经上传的数据长度，单位 Bytes

totalBytesExpectedToSend

number

是

预期需要上传的数据总长度，单位 Bytes

注意事项

在4.25版本iOS平台增加了Task原生对象自动销毁的逻辑，即上传完成后自动释放原生的Task对象，建议开发者在complete回调中置空Task对象，例

complete: () => {
            this.task = null
          },

如不释放，在调用Task对象的方法将导致控制台报错： error: instance object does not exist: id:15

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="demo">
          <image v-if="imageSrc" :src="imageSrc" class="image" mode="widthFix"></image>
          <text v-else class="uni-hello-addfile" @click="chooseImage">+ 选择图片</text>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>


<style>
  .image {
    width: 100%;
  }

  .demo {
    background: #fff;
    padding: 25px;
    justify-content: center;
    align-items: center;
  }

  .uni-hello-addfile {
    text-align: center;
    background: #fff;
    padding: 25px;
    margin-top: 10px;
    font-size: 19px;
    color: #808080;
  }
</style>