无法处理大文件

Question

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

文件选择器组件.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)
}
};

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