Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail "how WeChat Mini Programs uploads local resources to the developer server". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how WeChat Mini Programs uploads local resources to the developer server" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

Wx.uploadFile (OBJECT)

Upload local resources to the developer server. For example, after the page obtains the temporary file path of a local resource through APIs such as wx.chooseImage, you can upload the local resources to the specified server through this API. The client initiates a HTTPS POST request, where Content-Type is multipart/form-data.

OBJECT parameter description:

The required parameter type indicates that urlString is the path where the developer server urlfilePathString is to upload the file resource nameString is the key corresponding to the file, and the developer can obtain the binary content of the file through this key on the server side headerObject No HTTP request Header Cannot set RefererformDataObject No HTTP request other additional form datasuccessFunction No API calls successful callback function failFunction No API call failed callback function completeFunction No API calls the finished callback function (both successful and failed calls will be executed)

Success return parameter description:

The parameter type describes the statusCodeNumberHTTP status code of the data returned by the dataString developer server

Sample code:

Wx.chooseImage ({success:function (res) {var tempFilePaths = res.tempFilePaths wx.uploadFile ({url: 'http://example.weixin.qq.com/upload', / / is only an example Non-real interface address filePath: tempFilePaths [0], name: "file", formData: {"user": "test"} success: function (res) {var data = res.data / / do something}})})

Return value:

The basic library 1.4.0 is supported, and the lower version needs to be compatible.

Returns a uploadTask object. Through uploadTask, you can listen for upload progress changes and cancel upload tasks.

UploadTask

List of methods for the uploadTask object:

Method parameters indicate that the minimum version of onProgressUpdatecallback listens to the upload progress change 1.4.0abort interrupts the upload task 1.4.0

OnProgressUpdate return parameter description:

Parameter type indicates the percentage of progressNumber upload progress, the length of data uploaded by totalBytesSentNumber, and the total length of data expected to be uploaded by BytestotalBytesExpectedToSendNumber (in Bytes)

Sample code:

Const uploadTask = wx.uploadFile ({url: 'http://example.weixin.qq.com/upload', / / is an example only Non-real interface address 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 ('length of data uploaded', res.totalBytesSent) console.log ('total length of data expected to be uploaded' Res.totalBytesExpectedToSend)}) uploadTask.abort () / / cancel upload task Bug & Tip

Tip: the maximum concurrency limit is 10

Tip: default timeout and maximum timeout are both 60s

Wx.downloadFile (OBJECT)

Download the file resources locally. The client directly initiates a HTTP GET request that returns the local temporary path to the file.

OBJECT parameter description:

The parameter type is required. UrlString is the urlheaderObject of the download resource No HTTP requests HeadersuccessFunction No to send it to the page in the form of tempFilePath after the download succeeds. Res= {temporary path of tempFilePath:' file'} failFunction No API calls failed callback function completeFunction No API call ends callback function (both successful and failed calls will be executed)

Note: the temporary path of the file can be used normally during the startup of Mini Program. For lasting preservation, you need to call wx.saveFile actively and access it only when Mini Program is started next time.

Sample code:

Wx.downloadFile ({url: 'http://example.com/audio/123', / / is only an example, not a real resource success: function (res) {wx.playVoice ({filePath: res.tempFilePath})}))

Return value:

The basic library 1.4.0 is supported, and the lower version needs to be compatible.

Returns a downloadTask object, through downloadTask, you can listen for download progress changes and cancel the download task.

DownloadTask

List of methods for the downloadTask object:

Method parameters indicate that the minimum version onProgressUpdatecallback listens to the download progress change 1.4.0abort interrupts the download task 1.4.0

OnProgressUpdate return parameter description:

Parameter type indicates the percentage of progressNumber download progress, the length of data downloaded by totalBytesWrittenNumber, and the total length of data expected to be downloaded by BytestotalBytesExpectedToWriteNumber (in Bytes)

Sample code:

Const downloadTask = wx.downloadFile ({url: 'http://example.com/audio/123', / / is an example only Not a real resource success: function (res) {wx.playVoice ({filePath: res.tempFilePath})}) downloadTask.onProgressUpdate ((res) = > {console.log ('download progress', res.progress) console.log ('length of data already downloaded', res.totalBytesWritten) console.log ('total length of data expected to be downloaded') Res.totalBytesExpectedToWrite)}) downloadTask.abort () / / cancel the download task Bug & Tip

Tip: the maximum concurrency limit is 10

Tip: default timeout and maximum timeout are both 60s

Tip: the referer of a network request cannot be set, and the format is fixed as https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of Mini Program, {version} is the version number of Mini Program, and a version number of 0 indicates the development version.

Tip: invalid header settings for iOS Wechat client in version 6.5.3 and earlier

After reading this, the article "how WeChat Mini Programs uploads local resources to the developer server" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.