javascript - ReactJS 多文件上传和 axios post : Uncaught (in promise) SyntaxError:

Question

在我的 ReactJS 应用程序中，用户可以上传多个图像，这些图像被保存到文件系统，然后我从数据库中获取它们的链接(我事先将它们保存到数据库中)。只要用户只上传一张图片，这种方法就可以正常工作，但我需要能够同时上传大量图片。

当我这样做时，我总是会收到以下错误:

Uncaught (in promise) SyntaxError: Unexpected token P in JSON at position 0
    at Main.js:278
    at <anonymous>

这是我发布/获取数据的方式:

handleUpload (event) {
    var _this = this;
    var files = event.target.files;

    const data = new FormData();

    for (var i=0; i<files.length; i++) {
        data.append("icons", files[i]);  
    }

    axios.post('/newicons', data)
    .then(function (response) {
            console.log(response);
            _this.props.handleUpload()
        })
        .catch(function (error) {
            console.log(error);
        });
}

handleUpload() {
    fetch('/icons')
        .then(res => res.json())
        .then(icons => this.setState({icons}))
}

我也试过使用 promises，像这样:

addIcons (event) {
  var _this = this;
  var files = event.target.files;

    const data = new FormData();

    for (var i=0; i<files.length; i++) {
        data.append("icons", files[i]);  
    }

    axios.post('/newicons', data)
    .then(function (response) {
            console.log(response);
            _this.props.handleUpload()
        })
        .catch(function (error) {
            console.log(error);
        });
}

handleIconUpload (event) {
    return Promise.all([this.addIcons(event)])
        .then(this.props.handleUpload())
        .catch(err => console.log('There was an error:' + err))
}

但这给了我这个错误:

 Unhandled Rejection (SyntaxError): Unexpected token P in JSON at position 0 (anonymous function)
 275 | 
 276 | handleUpload() {
 277 |  fetch('/fetchicons')
 > 278 |        .then(res => res.json())
 279 |      .then(fetchedicons => this.setState({fetchedicons}, () => 
this.setIcons()))
 280 | }`

我不太确定如何解决这个问题。

当用户打开页面时，我想获取已经上传的图片。一旦用户上传了更多图片，我想更新网站上显示的图片。

据我了解，上面的代码(不是 promise 的代码)发布图片，一旦成功，它会调用 this.props.handleUpload() 并再次获取图片，所以我真的不明白为什么它不能处理多个图像。

我想知道的是: 我在尝试解决此问题时做错了什么以及如何解决它？

编辑:这是我的/newicons-route:

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "./client/src/icons");
    },

    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
        cb(null, newFilename);
    },
})

const upload = multer({ storage: storage });

router.post("/", upload.array('iconupload'), (req,res) => {
    for (var i=0; i<req.files.length; i++) {
        var newIcon = new Icons();
        newIcon.icons = req.files[i].path;
        newIcon.save(function (err) {
        if(err)
            res.send(err);
        res.send("Entry added successfully!");
    });
    }

    console.log(filelist);
});

Answer 1

您在图像数组中迭代时发送服务器响应，您必须将发送移到循环之外:

router.post("/", upload.array('iconupload'), (req,res) => {
    try {
       req.files.forEach((image) => {
           var newIcon = new Icons();
           newIcon.icons = image.path;
           newIcon.save(function (err) {
              if(err) throw err;
           });
       });
       res.send("Entry added successfully!");
    } catch (e) {
       res.send(e)
    }
});