js文件上传

工程：WebApi工程

(1)文件流形式

import React from 'react';
import ReactDOM from 'react-dom';
class Import extends React.Component {
    constructor(props) {
        super(props);
        this.bindHander();
    };

    bindHander() {
        this.openDisk = this.openDisk.bind(this);
        this.readFileContent = this.readFileContent.bind(this);
    };

    openDisk() {
        this.fileUpload.click();
    };

    readFileContent(e) {
        let
            _self = this,
            file = e.target.files[0];
        if (file) {
            let
                reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function () {
                _self.props.uploadCallback(file.name, new Uint8Array(this.result));
            };
        } else
            console.log('error');
    };

    render() {
        return <input type="file" hidden ref={(el) => { this.fileUpload = el }} onChange={this.readFileContent} accept=".xml" />
    }
};
export default Import;

import Import from './Import';
const contants = {
    ERROR: 'Error',
    TIMEOUT: 'Load time out',
    LOADERROR: 'Load error!',
    URLCANNOTFIND: 'Url can not find'
}

export class Test extends React.Component {
    constructor(props) {
        super(props)
    };

    uploadClick() {
        this.import.openDisk()
    };

    uploadHandler(name, content) {
        g.loading(true);
        let
            uploadFile = {
                name: name,
                fileContent: content
            },
            request = {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json"
                },
                credentials: "same-origin",
                body: JSON.stringify(uploadFile)
            };
        fetch('api/test/fileupload', request).then(response => {
            if (response.ok)
                return response.text();
            else {
                if (response.status == 401) {
                    g.loading(false);
                    g.alert(true, {
                        title: contants.ERROR,
                        content: contants.TIMEOUT,
                        type: 'i',
                        clickY: () => { console.log(contants.LOADERROR) }
                    });
                }
                if (response.status == 400) {
                    g.loading(false);
                    g.alert(true, {
                        title: contants.ERROR,
                        content: contants.URLCANNOTFIND,
                        type: 'i',
                        clickY: () => { console.log(contants.LOADERROR) }
                    });
                }
                else throw new Error(response.statusText);
            };
        }).then(dataStr => {
            if (dataStr == null || dataStr == '')
                return null;
            else return JSON.parse(dataStr);
        })
    }

    render() {
        return <div>
            <div onClick={this.uploadClick.bind(this)}>{'Upload Click'}</div>
            <Import
                ref={el => this.import = el}
                uploadCallback={this.uploadHandler.bind(this)}
            />
        </div>
    }
}

 controller接受文件流

    [HttpPost, Route("fileupload")]
        public string FileUpload(UploadModel uploadModel)
        {
            byte[] buffer = new byte[uploadModel.fileContent.Count];
            for (int i = 0; i < uploadModel.fileContent.Count; i++)
            {
                buffer[i] = (byte)(uploadModel.fileContent[i]);
            }
            return "success";
        }

        public class UploadModel
        {
            public string name { get; set; }
            public Dictionary<int, int> fileContent { get; set; }
        }

(2)FormData

    uploadChange() {
        let
            self = this,
            element = $(ReactDOM.findDOMNode(this)),
            input = element.find('input[type="file"]')[0];
        let
            data = new FormData();
        data.append('file', input.files[0]);
        fetch('api/demo/uploadfile', {
            method: 'POST',
            headers: {
                'Appect': 'application/json'
            },
            body: data
        }).then(r => {
            return r.json();
        }).then(json => {
            console.log(json);
        })
    }

controller接收

        using System.Web;

        [HttpPost, Route("uploadfile")]
        public string UploadFile() {
            var file = HttpContext.Current.Request.Files[0];
            var aa = HttpContext.Current.Request.Form.Get("aa");
            return aa + "_" + file.FileName + "_" + file.ContentLength;
        }

==================================================================华丽的分割线=================================================================================

工程：.NetCore

fetch没整明白。接收的时候一直报错

这里用ajax  和 FormData

 readFileContent(e) {
        let
            _self = this,
            file = e.target.files[0];
        if (file) {
            let
                data = new FormData();
            data.append('file', file);
            console.log('import')
            $.ajax({
                url: `${CommonUtil.getTargetUrlPrefix(SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING)}/api/timeslots/importtimeslot`,
                data: data,
                method: 'POST',
                processData: false,
                contentType: false,
                cache: false,
                dataType: "json",
                targetComponent: SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING,
                success: function (res) {
                    let
                        result = res;
                    console.log('success');
                },
                error: function (e) {
                    console.log(e);
                },
                headers: {
                    Authorization: "Bearer " + userProfileManager.getAccessToken()
                },         
            });
        }
    };

controller接收

        [HttpPost("importtimeslot")]
        public async Task<IActionResult> ImportTimeslot()
        {
            var file = HttpContext.Request.Form.Files[0];
            var command = new ImportTimeslotsCommand(file, TimeslotImportSheetName);
            var result = await _mediator.Send(command);
            return Request.OK(result);
        }

表单提交

    importVenueChanged() {
        $$.loading(true);
        let urlPrefix = CommonUtil.getTargetUrlPrefix(SAComponents.COMPONENT_ADMINISTRATION), self = this,
            option = {
                url: urlPrefix + '/api/venues/import',
                targetComponent: SAComponents.COMPONENT_ADMINISTRATION,
                method: 'POST',
                success: function (res) {
                    console.log(this);
                },
                error: function (e) {
                    console.log(e);
                }
            };
        $('#venueUploadForm').ajaxSubmit(option);
    }

    render() {
        return <form id="venueUploadForm" name="venueUploadForm" method="post" encType="multipart/form-data" style={{ display: "none" }}>
            <input id="importVenueFile" name="importVenueFile" type="file" onChange={this.importVenueChanged.bind(this)} />
        </form>
    }

controller接收

[HttpPost("import")]
public async Task<IActionResult> Import()
{
    var file = HttpContext.Request.Form.Files[0];
    var result = await _mediator.Send(new ImportVenueCommand(file.OpenReadStream()));
    return Request.Created("api/venues/viewreport", result);
}