Upload and Download

API Declaration

Add the following configuration to the features attribute in the manifest.json file:

{"name": "system.request"}

Module Import

Add the following configuration to the script element on the page where the API will be called:

import request from '@system.request'

Or

var request = require("@system.request")

Application Scope

Definition

[h2]request.upload(OBJECT)

Description

Uploads a file.

In 1060 and later versions, you can use config.network in the manifest.json file to configure the network timeout.

OBJECT parameters

files parameters

data parameters

Parameters returned in success

Sample code

request.upload({
    url: "https://www.example.com",
    header: { "Accept-Encoding": "gzip, deflate", "Accept-Language": "zh-CN,en-US;q=0.8,en;q=0.6" },
    files: [
    {
        uri: "internal://xxx/xxx/test",
        name: "file1",
        type: "test.png"
    }
    ], data: [
    {
        name: "key1",
        value: "value1"
    }
    ],
    success: function (data) { 
        console.log("handling success"); 
    },
    fail: function (data, code) {
        console.log("handling fail, code=" + code);
    }
})

[h2]request.download(OBJECT)

Description

Downloads a file.

The downloaded file is stored on a user's mobile phone. They can go to /Android/data/com.huawei.fastapp.dev/files/fastappEngine/ using the file manager to manage the downloaded file. The downloaded file will be stored until the user clears the quick app data.

OBJECT parameters

Parameters returned in success

Sample code

request.download({
    url: "https://www.example.com",
    success: function (data) { 
        console.log("handling success" + data.token); 
    },
    fail: function (data, code) {
        console.log("handling fail, code=" + code);
    }
})

[h2]request.onDownloadComplete(OBJECT)

Listens to download tasks.

OBJECT parameters

Parameters returned in success

Result codes returned in fail

Sample code

request.onDownloadComplete({
    token: "123",
    success: function (data) {
        console.log("handling success" + data.uri);
    },
    fail: function (data, code) {
        console.log("handling fail, code=" + code);
    }
})

Demo

<template>
    <div>
        <div>
            <text>{{componentName}}</text>
        </div>
        <div>
            <div>
                <text>Download file: {{fileDownloadData}}</text>
            </div>
            <input type="button" onclick="downloadFile" value="Download file"/>
            <div>
                <text>Download file path: {{fileDownloadUri}}</text>
            </div>
            <input type="button" onclick="downloadFileComplete" value="File download status"/>
            <div>
                <text>Upload file: {{fileUploadData}}</text>
            </div>
            <input type="button" onclick="uploadFile" value="Upload file"/>
        </div>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .item-content {
        flex-direction: column;
        background-color: #ffffff;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 30px;
        align-items: flex-start;
    }
    .txt {
        lines: 5;
        padding-top: 15px;
        padding-bottom: 15px;
    }
</style>
<script>
    import request from '@system.request'
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'request',
            fileDownloadData: '',
            fileUploadData: '',
            fileDownloadUri:""
        },
        onInit: function () {
            this.$page.setTitleBar({ text: 'request' })
        },
        downloadFile: function () {
            var that = this;
             // Download a file and save it to the local host.
          request.download({
                url: 'https://www.huawei.com/Assets/CBG/img/logo.png',
                description: 'This is description.',
                filename: 'HuaweiLogo.png',
                success: function (ret) {
                    that.fileDownloadData = ret.token;
                    console.log('file_download_data--------' + JSON.stringify(ret.token));
                    prompt.showToast({
                        message: 'file_download_data--------' + JSON.stringify(ret.token)
                    })
                },
              fail: function (errmsg, errcode) {
                  prompt.showToast({
                      message: "Download failure: "+errcode + ':' + errmsg
                  })
              }
            })
        },
        downloadFileComplete: function () {
            var that = this;
             // Download a file and save it to the local host.
            console.log('Download a file');
            request.onDownloadComplete({
                token:that.fileDownloadData,
                success: function (ret) {
                    that.fileDownloadUri = ret.uri;
                    console.log('fileDownloadUri--------' + JSON.stringify(ret.uri));
                    prompt.showToast({
                        message: 'fileDownloadUri--------' + JSON.stringify(ret.uri)
                    })
                },
                fail: function (errmsg, errcode) {
                    prompt.showToast({
                        message: "Download failure: "+errcode + ': ' + errmsg
                    })
                }
            })
        },
        uploadFile() {
            var that = this;
            // Upload a local file. In the preceding command, data indicates the request parameter, and files indicates the list of files to be uploaded.
            request.upload({
                url: "https://117.78.33.207:48080/uploadDemo/api/uploadFile",
                header:{"Accept-Encoding": "gzip, deflate","Accept-Language": "zh-CN,en-US;q=0.8,en;q=0.6"},
                files: [
                    {
                        uri: that.fileDownloadUri,
                        name: "component_test.png",
                        type:"multipart/form-data"
                    }
                ],
                success: function (ret) {
                    that.fileUploadData = ret.data;
                }
            })
        }
    }
</script>

Version Change History

Links

[h2]FAQs

• After the request.download API is used to download a file, the file.move API fails to be executed and a message is displayed indicating that the src is invalid. What can I do?
• What can I do if form-data received by the server is empty when a quick app calls the request.upload API to upload a file?

[h2]Cases

Failure to Display Images Downloaded Through the File Download API