UniApp configuration and usage guide for file downloading and uploading

UniApp Configuration and Usage Guide for Implementing File Download and Upload

1. Introduction
In mobile application development, file download and upload are very common functions. As a cross-platform mobile application development framework, UniApp also provides corresponding interfaces to facilitate developers to implement file download and upload functions. This article will introduce how to configure and use the file download and upload functions in the UniApp framework.

2. Configuration

1. Add plug-in
   To use the file download and upload functions in the UniApp project, you need to configure the plug-in first. Open the HBuilderX tool, find the project root directory, right-click and select Import Plug-in. Search file in the plug-in store, find the file plug-in and import it. After the import is successful, you can see the uniCloud-aliyun folder in the unpackage directory of the project root directory.
2. Configuring Cloud Storage
   In the UniApp project, file downloading and uploading can be achieved through cloud storage. UniApp currently supports cloud storage services from Alibaba Cloud and Tencent Cloud. In this article, we take Alibaba Cloud as an example to configure.

(1) Register an Alibaba Cloud account and purchase object storage services.
(2) In the HBuilderX tool, open the manifest.json file and add the following code under the uniCloud node:

"provider": "aliyun",
"aliyun": {
  "accessKeyId": "your-access-key-id",
  "accessKeySecret": "your-access-key-secret",
  "bucket": "your-bucket-name",
  "region": "your-region"
}

Among them, your -access-key-id and your-access-key-secret are the AccessKey ID and AccessKey Secret of the Alibaba Cloud account, your-bucket-name is the one in the object storage Bucket name, your-region is the number of the region where the bucket is located.

3. File download

1. Configure uniCloud function
   (1) In the HBuilderX tool, open the common folder and create a file named ## Cloud function of #downloadFile. Add the following code in the cloud function:

'use strict';
const cloud = require('wx-server-sdk');
cloud.init()

exports.main = async (event, context) => {
  const fileID = event.fileID;
  const res = await cloud.downloadFile({
    fileID: fileID
  })
  return res.fileContent;
}

(2) Add the following code under the

uniCloudFunction node in the manifest.json file:

"downloadFile": {
    "path": "common/downloadFile",
    "ops": {
        "timeout": 30000,
        "env": "env-id"
    }
}

Among them,

env-id is your current environment ID.

Download file
2. In the page where you need to download the file, use the following code to download the file:
   

uni.cloud.callFunction({
  name: 'downloadFile',
  data: {
    fileID: 'your-file-id'
  },
  success(res) {
    uni.showToast({
      title: '下载成功！'
      icon: 'success'
    })
    uni.saveFile({
      tempFilePath: res.result,
      success(res) {
        console.log('文件保存路径：', res.savedFilePath)
      }
    })
  },
  fail(err) {
    console.log('文件下载失败：', err)
  }
})

Among them,

your-file-id is the ID of the file that needs to be downloaded.

4. File upload

Configure uniCloud function
1. (1) In the HBuilderX tool, open the
   common folder and create a file named ## Cloud function of #uploadFile. Add the following code in the cloud function:

   'use strict';
   const cloud = require('wx-server-sdk');
   cloud.init()
   
   exports.main = async (event, context) => {
     try {
       const res = await cloud.uploadFile({
         cloudPath: event.cloudPath,
         fileContent: event.fileContent
       })
       return res.fileID;
     } catch (e) {
       console.error(e)
       return null;
     }
   }

Upload file

In the page where you need to upload a file, use the following code to upload the file:
2. 
   

   uni.chooseImage({
     count: 1,
     success(res) {
       const filePath = res.tempFilePaths[0];
       uni.getFileSystemManager().readFile({
         filePath: filePath,
         encoding: 'base64',
         success(res) {
           const fileContent = res.data;
           uni.cloud.callFunction({
             name: 'uploadFile',
             data: {
               cloudPath: 'your-cloud-path',
               fileContent: fileContent
             },
             success(res) {
               uni.showToast({
                 title: '上传成功！'
                 icon: 'success'
               })
               console.log('文件ID：', res.result)
             },
             fail(err) {
               console.log('文件上传失败：', err)
             }
           })
         },
         fail(err) {
           console.log('文件读取失败：', err)
         }
       })
     }
   })

Among them,

your-cloud-path

is the path of the file in cloud storage. 5. Summary

The above is the configuration and usage guide for using UniApp to download and upload files. Through plug-in configuration and the use of cloud storage, we can easily implement file download and upload functions in UniApp. I hope this article can be helpful to UniApp developers.

The above is the detailed content of UniApp configuration and usage guide for file downloading and uploading. For more information, please follow other related articles on the PHP Chinese website!