问题背景
某一天，公司里需要一个功能，一个可以把一份参数多如牛毛的配置文件本地存储下来，本地也可以把文件读取出来这样便利的功能。分析一下这个需求，主要就是要以json的格式，保存，和web页面读取json文件的这样两个功能。公司的工程是react编写的，可能对vue和原生js都有一定了解的你，对react并不熟悉，那么，如何解决这个问题
分步解决
一、保存JSON格式的文件
首先，我们假定拿到了一个json格式的变量
var jsonData;
那么，再写一个download的工具类
/*
* 下载文件
* */
function download(content, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
发现问题！直接download下来的是没有格式化过的文本，乱成一团，毫无可读性可言。一个formatjson非常重要！
/*
* 格式化json文件，便于json文件的下载
* */
function formatJson(json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' ';
options = options || {};
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
reg = /\r\n\,/g;
json = json.replace(reg, ',');
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ':');
}
(json.split('\r\n')).forEach(function (node, index) {
var i = 0,
indent = 0,
padding = '';
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
}
一行调用！
download(formatJson(jsonData), "configuration.json");
二、读取JSON格式的文件
react有很多轮子，upload当然也有相应封装好的工具，引入！
（在这之前别忘了npm install react-fileupload -save）
import FileUpload from 'react-fileupload'
写一份配置文件，这个文件中写出的API这边有https://www.jianshu.com/p/3aa9d5ad41b0
this.options = {
baseUrl: 'https://jsonplaceholder.typicode.com/posts/',
param: {
_c: 'file',
_a: 'UploadFile'
},
chooseFile: this.chooseFile,
doUpload: this.do_upload,
uploading: (progress) => { this.uploading(progress); },
uploadSuccess: this.upload_success,
uploadError: this.upload_error,
uploadFail: this.upload_fail,
}
操作在那边已经很清晰啦，我就不多说了
<FileUpload options={this.options}>
<button ref="chooseBtn">Chose file</button>
<button ref="uploadBtn">upload</button>
</FileUpload>
拿到文件之后，当然要把文件内容在web上就解析出来
var self = this;
var reader = new FileReader();
reader.readAsText(files[0]);
reader.onload = function () {
console.log($.parseJSON(reader.result));
var fileContent = $.parseJSON(reader.result)
}
好啦，fileContent就是里面的内容，json对象，拿到之后，就可以为所欲为了！
