用fetch做file upload本地測試沒問題，移到外部環境就掛了（更）

node.js express

jokie7585 2020-07-17 02:56:43 ‧ 2369 瀏覽

各位大大好，今天遇到了一點問題不知道從何下手

環境

前端: reactjs(nodejs web server) // 測試環境(我就懶
後端: EXPRESS (我用multer這個套件來處理上傳的

問題

我在自己的電腦上前後端用192.168.xxx.xxx來串API的時候，UPLOAD都沒有問題。
但是搬到實驗室的電腦上時(140.XXX.XXX.XXX)，小檔案沒有問題，但大的檔案就直接Pending(從chrome的開發者工具看的)

而且我傳的是500多mb的檔案，為什麼在chrome的開發者工具裡面看到request size卻不到1kb? 不知道問題是不是出在這裡

用來作upload的程式碼

<div className="WorkspaceModel-FileSystem-UploadModule">
                        <h1>Upload Module</h1>
                        <p>use these component to up load file</p>
                        
                        <input  type="file"
                                name="uploadFile"
                                ref={ref => this.uploadInput = ref}
                                multiple="multiple"
                        />
  
                        
                        <button  type="buttom"
                                 onClick={() => {this.handleUpLoadFile(this.uploadInput, this.state.uploadURL)}}
                        >
                            上傳檔案
                        </button>

                    </div>

handleUpLoadFile = (uploadInput, uploadURL) => {

        let form = new FormData();
        for(let files of uploadInput.files){
            form.append(uploadInput.name, files);
        }

        fetch(uploadURL+'/upload', {
            credentials: 'include',
            headers: {
                'Cookie': 'token',
            },
            method: 'POST',
            body: form
        })
        .then((Response) => {
            if(Response.ok) {
                Response.json()
                .then(data => {
                    let payLoad = {
                        dirArray: data,
                    }
                    this.props.SYS_LS(payLoad);
                })
            }
            else {
                console.log(Response)
            }
        })
    }

更新browser network&console截圖

(console為最後一個request的訊息)

看更多先前的討論...收起先前的討論...

dragonH iT邦超人 5 級 ‧ 2020-07-17 09:50:08 檢舉

貼個你 browser

console 跟 network 的截圖

jokie7585 iT邦新手 5 級 ‧ 2020-07-17 10:39:04 檢舉

@dragonH 大大截圖好了！

dragonH iT邦超人 5 級 ‧ 2020-07-17 10:44:29 檢舉

馬一下 ip..

看起來應該不是前端的問題沒錯

等等來實測一下

jokie7585 iT邦新手 5 級 ‧ 2020-07-17 10:45:58 檢舉

碼好了，剛剛發現漏了一個QAQ

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

dragonH

iT邦超人 5 級 ‧ 2020-07-17 12:15:25

最佳解答

應該不是 timeout 的問題

尤其妳如果是從 express 控制的話

應該會回傳相對應的 status code

以下為預設情況

傳了 6xx MB 的檔案

花了 15 min

也沒有 timeout

且順利上傳

我是開一台 ec2 來測的

不是測 local

所以我認為問題應該是你的網路

因為看你的 ip

應該是學術網路

不知道有沒有啥限制就是

附上我測試的 code

const Express = require('express');
const multer = require('multer');

const port = process.env.PORT || 3000;
const app = Express();
const router = Express.Router();

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, `${file.originalname}`)
    }
});

const upload = multer({ storage });

router.get('/', (req, res) => {
    res.status(200).send({ message: 'This is a demo of multer' });
});

router.post('/upload', upload.single('file'), (req, res) => {
    res.status(200).send({ message: 'Upload succeed.' }).end();
});

app.use(router);

app.listen(port, () => {
    console.log(`Server is listening on ${port}`);
})