capacitor APP下载保存文件和上传文件

由 夕空 撰写于  2021年3月29日

npm i cordova-plugin-file

下载:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<title>APP下载保存图片文件</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

</head>

<body>

<img src="" alt="" id="bot-img">
<script>

// 等待全局插件事件:
document.addEventListener("deviceready", function () {

// downFile()
if (!window.localStorage.getItem('fileurl')) {
//开始下载
downFile()
} else {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('读取存储的文件:: ');
fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
readBinaryFile(fileEntry)
})
})
}

}, false);


//》》》读取图片文件
function readBinaryFile(fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();

reader.onloadend = function () {
//加载成功显示图片
var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
displayImage(blob);
};

reader.readAsArrayBuffer(file);

}, onErrorReadFile);
}
//显示图片
function displayImage(blob) {
var elem = document.getElementById('bot-img');
elem.src = window.URL.createObjectURL(blob);
}

//》》》读取文件
function readFile(fileEntry) {

fileEntry.file(function (file) {
var reader = new FileReader();

reader.onloadend = function () {
console.log(">>>>>>>>>>>>>>>>>>Successful file read: " + JSON.stringify(fileEntry) + ' || ' + fileEntry.fullPath + ' || ' + this.result);
// displayFileData(fileEntry.fullPath + ": " + this.result);
};

reader.readAsText(file);

}, onErrorReadFile);
}
//写入文件
function writeFile(fileEntry, dataObj) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function () {
console.log("Successful file write...");
window.localStorage.setItem('fileurl', true);
// readFile(fileEntry);
readBinaryFile(fileEntry);
};

fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};

// If data object is not passed in,
// create a new Blob instead.
if (!dataObj) {
dataObj = new Blob(['some file data'], { type: 'text/plain' });
}

fileWriter.write(dataObj);
});
}
function downFile() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('============================file system open: ' + fs.name);
fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
console.log('============================fileEntry is file? ' + fileEntry.isFile.toString());
var oReq = new XMLHttpRequest();
// Make sure you add the domain name to the Content-Security-Policy <meta> element.
oReq.open("GET", "https://cordova.apache.org/static/img/cordova_bot.png", true);
// Define how you want the XHR data to come back
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response; // Note: not oReq.responseText
if (blob) {
// Create a URL based on the blob, and set an <img> tag's src to it.
// var url = window.URL.createObjectURL(blob);
// document.getElementById('bot-img').src = url;
writeFile(fileEntry, blob);

} else console.error('we didnt get an XHR response!');
};
oReq.send(null);
}, function (err) { console.error('error getting file! ' + err); });
}, function (err) { console.error('error getting persistent fs! ' + err); });
}


function onErrorReadFile(err) {
console.log('ERROR:' + err);
}
</script>

</body>

</html>

上传

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function() {
// Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://mysweeturl.com/upload_handler", true);
oReq.onload = function (oEvent) {
// all done!
};
// Pass the blob in to XHR's send method
oReq.send(blob);
};
// Read the file as an ArrayBuffer
reader.readAsArrayBuffer(file);
}, function (err) { console.error('error getting fileentry file!' + err); });
}, function (err) { console.error('error getting file! ' + err); });
}, function (err) { console.error('error getting persistent fs! ' + err); });




声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - capacitor APP下载保存文件和上传文件


欢迎光顾我的小站!