Skip to main content
Version: 3.x

Taro.uploadFile(option)

Uploads local resources to the server. The client initiates an HTTPS POST request with content-type being multipart/form-data. Read related instructions before use.

Reference

Type

(option: Option) => Promise<SuccessCallbackResult & UploadTask> & UploadTask

Parameters

Option

PropertyTypeRequiredDescription
urlstringYesDeveloper server URL
filePathstringYesPath to upload a file
namestringYesKey of the file. The developer can get the binary content of the file on the server via this key.
headerRecord<string, any>NoHTTP request Header. Referer is not available in Header.
formDataRecord<string, any>NoAdditional form data in the HTTP request
timeoutnumberNoTimeout time, in ms
fileNamestringNoName of the uploaded file
(Only H5)
complete(res: CallbackResult) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: CallbackResult) => voidNoThe callback function for a failed API call
success(res: CallbackResult) => voidNoThe callback function for a successful API call

API Support

APIWeChat Mini-ProgramH5React Native
Option.fileName✔️

SuccessCallbackResult

PropertyTypeDescription
datastringData returned by the developer server
statusCodenumberHTTP status code returned by the developer server
errMsgstringCall result

Sample Code

Example 1

Taro.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
Taro.uploadFile({
url: 'https://example.weixin.qq.com/upload', //This value for demonstration purposes only is not a real API URL.
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})

Example 2

const uploadTask = Taro.uploadFile({
url: 'https://example.weixin.qq.com/upload', //This value for demonstration purposes only is not a real API URL.
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function (res){
var data = res.data
//do something
}
})
uploadTask.onProgressUpdate((res) => {
console.log('Upload progress', res.progress)
console.log('The length of uploaded data', res.totalBytesSent)
console.log('The length of data expected to be uploaded', res.totalBytesExpectedToSend)
})

uploadTask.abort() // Cancel upload tasks

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React Native
Taro.uploadFile✔️✔️✔️✔️✔️