无法处理大文件

Question

我正在建立一个简单的网站，允许从上传的文件创建一个哈希。当我在本地运行我的代码时，它工作得很好，但是，在将它部署到服务器后，它无法处理大文件。其想法是限制用户上传大文件(不超过10MB)，如果文件大于10MB，则抛出弹出警报。我是应该检查Component.js中的文件大小，还是应该在action.js中处理它？

FileSelectorComponent.js

const mapDispatchToProps = (dispatch) => {
return {
    onFileChange: event => dispatch(hash_file(document.getElementById("hash_type_file").options[document.getElementById("hash_type_file").selectedIndex].value, event.target.files[0]))
}}

HashFileAction.js

 if (hash_type === 'md5') {
        console.log(file);
        reader.onloadend = function () {
            text = (reader.result);
            hash_value = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
            type = hash_type.toUpperCase() + " HASH: ";
            hash_obj = action_dispatch_builder(type, hash_value.toString(), hash_obj, file);
            dispatch(setHashFile(hash_obj));
        }

        if( file !== undefined ){
            reader.readAsBinaryString(file);
        }

    }
function action_dispatch_builder(type, hash_value, hash_obj, file) {
hash_obj["type"] = type;
hash_obj["hash_value"] = hash_value;
hash_obj["file_info"]["name"] = file["name"];
hash_obj["file_info"]["size"] = file["size"];
hash_obj["file_info"]["type"] = file["type"];
hash_obj["file_info"]["lastModifiedDate"] = file["lastModifiedDate"];
return hash_obj;}

Reducer.js

export const updateFile = (state = initialState, action) => {
switch (action.type) {
    case "UPLOAD":
        if(action.payload["file_info"]["size"] < 10000000){
            return {
                ...state,
                hash_type: action.payload["type"],
                hash_value: action.payload["hash_value"],
                info_vis: true,
                valid_size: true,
                file_info: {
                    name: action.payload["file_info"]["name"],
                    size: action.payload["file_info"]["size"],
                    type: action.payload["file_info"]["type"],
                    lastModifiedDate: action.payload["file_info"]["lastModifiedDate"]
                }
            }
        } else{
            console.log("HERE")
            return {
                ...state,
                info_vis: true
            }
             
        }
    default:
        return initialState;
}}

Answer 1

fileChangedHandler = (event) => {
    let file_size = event.target.files[0].size;
    // clear text when file is uploaded
    document.getElementById("hash_text").value = "";
    // check file size
    if(file_size > 10485760){
        return alert("File is too large!");      
    }else{
        this.props.onFileChange(event)
    }
};

我将此代码添加到我的组件中，它似乎解决了我的问题。