使用 try/catch 处理 413（请求实体太大）错误

Question

我想弄清楚如何在上传文件时处理 413 错误，to show the user that the file they are trying to upload is too large. 我正在使用React-dropzone从React 中的组件上传文件，然后将其传递给saga，然后sagas 中的函数将遍历文件并将每个文件发送到Rails - 使用Carrierwave上传文件，然后rails将发送回一些数据如果上传成功。

我的上传组件.jsx

this.state = {
    files: [{file1}, {file2}, {file3}]
}

uploadFiles = () => {
    this.props.saveFiles(this.state.files)
}

sagas.js

function* saveFiles(action){
    let err = false  
    let completed;

    const results = yield Promise.all(action.files.map(function(file){

        return saveFile(file)

    })).then(data => {

        completed = data

    })

    yield put({
        type: actionTypes.FILE_UPLOADED,
        index: completed
    })

}

function saveFile(file, cid, index){
    try{
        let formData = new FormData()
        formData.append("file", file)

        let result = fetch(URL,
        {
            method: "POST",
            credentials: "same-origin",
            body: formData
        }).then(response => response.json()).then(function(data){
            return data
        })

        return result
    } catch(ex) { console.log(ex) }

}

当我遇到 413 错误时，我还会收到此附加消息

错误 413 文件太大

Answer 1

我认为你可以检查 reponse.status 来决定如何处理响应：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#response_objects