js文件上传

 1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘; 3 class Import extends React.Component { 4 ????constructor(props) { 5 ????????super(props); 6 ????????this.bindHander(); 7 ????}; 8 ?9 ????bindHander() {10 ????????this.openDisk = this.openDisk.bind(this);11 ????????this.readFileContent = this.readFileContent.bind(this);12 ????};13 14 ????openDisk() {15 ????????this.fileUpload.click();16 ????};17 18 ????readFileContent(e) {19 ????????let20 ????????????_self = this,21 ????????????file = e.target.files[0];22 ????????if (file) {23 ????????????let24 ????????????????reader = new FileReader();25 ????????????reader.readAsArrayBuffer(file);26 ????????????reader.onload = function () {27 ????????????????_self.props.uploadCallback(file.name, new Uint8Array(this.result));28 ????????????};29 ????????} else30 ????????????console.log(‘error‘);31 ????};32 33 ????render() {34 ????????return <input type="file" hidden ref={(el) => { this.fileUpload = el }} onChange={this.readFileContent} accept=".xml" />35 ????}36 };37 export default Import;

 1 import Import from ‘./Import‘; 2 const contants = { 3 ????ERROR: ‘Error‘, 4 ????TIMEOUT: ‘Load time out‘, 5 ????LOADERROR: ‘Load error!‘, 6 ????URLCANNOTFIND: ‘Url can not find‘ 7 } 8 ?9 export class Test extends React.Component {10 ????constructor(props) {11 ????????super(props)12 ????};13 14 ????uploadClick() {15 ????????this.import.openDisk()16 ????};17 18 ????uploadHandler(name, content) {19 ????????g.loading(true);20 ????????let21 ????????????uploadFile = {22 ????????????????name: name,23 ????????????????fileContent: content24 ????????????},25 ????????????request = {26 ????????????????method: ‘POST‘,27 ????????????????headers: {28 ????????????????????‘Accept‘: ‘application/json‘,29 ????????????????????"Content-Type": "application/json"30 ????????????????},31 ????????????????credentials: "same-origin",32 ????????????????body: JSON.stringify(uploadFile)33 ????????????};34 ????????fetch(‘api/test/fileupload‘, request).then(response => {35 ????????????if (response.ok)36 ????????????????return response.text();37 ????????????else {38 ????????????????if (response.status == 401) {39 ????????????????????g.loading(false);40 ????????????????????g.alert(true, {41 ????????????????????????title: contants.ERROR,42 ????????????????????????content: contants.TIMEOUT,43 ????????????????????????type: ‘i‘,44 ????????????????????????clickY: () => { console.log(contants.LOADERROR) }45 ????????????????????});46 ????????????????}47 ????????????????if (response.status == 400) {48 ????????????????????g.loading(false);49 ????????????????????g.alert(true, {50 ????????????????????????title: contants.ERROR,51 ????????????????????????content: contants.URLCANNOTFIND,52 ????????????????????????type: ‘i‘,53 ????????????????????????clickY: () => { console.log(contants.LOADERROR) }54 ????????????????????});55 ????????????????}56 ????????????????else throw new Error(response.statusText);57 ????????????};58 ????????}).then(dataStr => {59 ????????????if (dataStr == null || dataStr == ‘‘)60 ????????????????return null;61 ????????????else return JSON.parse(dataStr);62 ????????})63 ????}64 65 ????render() {66 ????????return <div>67 ????????????<div onClick={this.uploadClick.bind(this)}>{‘Upload Click‘}</div>68 ????????????<Import69 ????????????????ref={el => this.import = el}70 ????????????????uploadCallback={this.uploadHandler.bind(this)}71 ????????????/>72 ????????</div>73 ????}74 }