React 使用Upload插件上传读取文件内容

问题背景

某一天，公司里需要一个功能，一个可以把一份参数多如牛毛的配置文件本地存储下来，本地也可以把文件读取出来这样便利的功能。分析一下这个需求，主要就是要以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,
        }

操作在那边已经很清晰啦，我就不多说了

          Chose file    
          upload

拿到文件之后，当然要把文件内容在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对象，拿到之后，就可以为所欲为了！