小程序中如何实现文件上传和下载？

目前，微信小程序已经沦为了人们日常生活中的必不可少工具之一，而其中最重要的功能之一就是文件的上载和浏览。无论是个人还是企业，都须要使用文件传输，因此，如何在小程序中同时实现文件上载和浏览就沦为了一个非常关键的问题。

本文将从两个方面去了解小程序中如何同时实现文件上载和浏览——文件上载和文件浏览。首先，我们来说说道文件上载。

一、文件上载

1. 上载文件前的准备工作工作

在已经开始上载文件前，第一步须要考量的就是哪些文件须要上载。如果你只须要上载一两个文件，可以轻易将文件上传至小程序编辑器中。但是如果须要上载大量文件，建议将文件上传至云研发中。首先，须要在小程序的 app.js 文件中初始化云研发：

wx.cloud.init({

env: 'test-123456' // 替代为你的环境 ID

})

以及对应的调用：

const db = wx.cloud.database();

const file = wx.cloud.file();

2. 上载文件的代码同时实现

具体内容的上载代码同时实现如下右图：

// 上载文件

wx.chooseMessageFile({

count: 1,

type: 'file',

success(res) {

// 挑选了文件

const tempFilePath = res.tempFiles[0].path;

const name = res.tempFiles[0].name;

// 上载文件至云存储

wx.cloud.uploadFile({

cloudPath: name,

filePath: tempFilePath,

success: res => {

console.log('[上载文件] 顺利：', res);

},

fail: err => {

console.error('[上载文件] 失利：', err);

}

})

},

fail(res) {

console.log('[上载文件] 失利：', res);

}

})

在这段代码中，我们采用了小程序的 API，首先调用了 wx.chooseMessageFile() 方法，以获取须要上载的文件。这里我们须要特别注意的就是，该方法就可以挑选一个文件，如果须要上载多个文件，可以采用其他方法。然后，我们将图片上传至云存储中。

通过以上代码，我们就可以随心所欲同时实现小程序中的文件上载功能。但是，在实际采用中，还须要考量文件的大小、文件格式、文件名等问题。

二、文件浏览

1. 以获取文件 URL

在已经开始浏览文件前，须要先以获取文件的 URL。具体内容同时实现代码如下：

// 以获取文件 URL

file.getTempFileURL({

fileList: [fileID],

success: res => {

console.log('[以获取文件 URL] 顺利：', res);

},

fail: err => {

console.error('[以获取文件 URL] 失利：', err);

}

})

在这段代码中，我们先须要建立一个 file 对象，然后调用 file.getTempFileURL() 方法，传至文件的 fileID，以获取文件 URL。

2. 浏览文件

以获取至文件 URL 后，就可以已经开始浏览文件了。具体内容同时实现代码如下：

// 浏览文件

wx.downloadFile({

url: url,

success: res => {

console.log('[浏览文件] 顺利：', res.tempFilePath);

},

fail: err => {

console.error('[浏览文件] 失利：', err);

}

})

在这段代码中，我们调用了小程序的 API，采用 wx.downloadFile() 方法浏览文件。传至的参数就是文件 URL，浏览顺利后可以回到一个临时文件路径。

总结

本文从两个方面了解了小程序中如何同时实现文件上载和浏览，牵涉至了小程序云研发的有关知识点和 API。在实际的采用中，还须要根据市场需求展开具体内容调整。因此，建议在采用前再仔细阅读有关文档和 API，以保证功能的稳定性和可靠性。