uniapp 文件读写
uniapp 文件读写方法
在uniapp中，文件读写操作可以通过H5、App、小程序等不同平台的API实现。以下是具体实现方式：
H5平台文件读写
H5平台可以使用HTML5的File API进行文件操作：
// 选择文件
const input = document.createElement('input')
input.type = 'file'
input.onchange = e => {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = event => {
console.log(event.target.result) // 文件内容
}
reader.readAsText(file) // 读取为文本
}
input.click()App平台文件读写
App端需要使用uni-app扩展API：
// 写入文件
uni.downloadFile({
url: 'http://example.com/file.txt',
success: res => {
uni.saveFile({
tempFilePath: res.tempFilePath,
success: savedRes => {
console.log(savedRes.savedFilePath) // 保存路径
}
})
}
})
// 读取文件
uni.getFileSystemManager().readFile({
filePath: 'filePath',
encoding: 'utf8',
success: res => {
console.log(res.data) // 文件内容
}
})微信小程序文件读写
微信小程序有自己的一套文件系统API：
// 写入文件
wx.downloadFile({
url: 'http://example.com/file.txt',
success: res => {
wx.saveFile({
tempFilePath: res.tempFilePath,
success: savedRes => {
console.log(savedRes.savedFilePath)
}
})
}
})
// 读取文件
wx.getFileSystemManager().readFile({
filePath: 'filePath',
encoding: 'utf8',
success: res => {
console.log(res.data)
}
})通用文件操作
对于跨平台文件操作，可以使用uni-app的API：
// 选择文件
uni.chooseFile({
count: 1,
success: res => {
const tempFilePaths = res.tempFilePaths
uni.getFileSystemManager().readFile({
filePath: tempFilePaths[0],
encoding: 'utf8',
success: readRes => {
console.log(readRes.data)
}
})
}
})
// 保存文件到本地
uni.saveFile({
tempFilePath: 'tempFilePath',
success: res => {
console.log(res.savedFilePath)
}
})注意事项
- 不同平台的文件系统权限不同，iOS和Android可能有差异
- 小程序环境对文件系统访问有较多限制
- 持久化存储建议使用uni.setStorage/uni.getStorage
- 大文件操作需要考虑性能问题
以上方法涵盖了uniapp在主要平台上的文件读写操作，开发者可根据具体需求选择合适的方式。
