首页 > 解决方案 > JSON 中意外的令牌 < 位置 0 图像上传问题

问题描述

好像不能上传图片。我收到Unexpected token < in JSON at position 0一个 POST 请求的错误。我找不到解析/JSON 问题出在哪里,但是当我删除图像请求/响应/模型字段时,POST 运行良好。

try { 
  const formData = new FormData();
  formData.append('email', formState.inputs.email.value);
  formData.append('image', formState.inputs.image.value);
  const responseData = await sendRequest(
    'http://localhost:3001/api/users/signup',
    'POST',
    formData,
  );
  auth.login(responseData.userId, responseData.token);
} catch (err) { }

在后端:user-routes.js

const fileUpload = require('../middleware/file-upload');
router.post('/signup',
  fileUpload.single('image'),

文件上传.js

const multer = require('multer');
const uuid = require('uuid/v1');

const MIME_TYPE_MAP = {
    'image/png': 'png',
    'image/jpeg': 'jpeg',
    'image/jpg': 'jpg'
};

const fileUpload = multer({
    limits: 5000000,
    storage: multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, 'uploads/images');
        },
        filename: (req, file, cb) => {
            const ext = MIME_TYPE_MAP[file.mimetype];
            cb(null, uuid() + '.' + ext);
        }
    }),
    fileFilter: (req, file, cb) => {
        const isValid = !!MIME_TYPE_MAP[file.mimetype];
        let error = isValid ? null : new Error('Invalid mime type!');
        cb(error, isValid);
    }
});

module.exports = fileUpload;

服务器.js


const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose')

const usersRoutes = require('./routes/users-routes');
const HttpError = require('./models/http-error');
const app = express();

app.use(bodyParser.json());


app.use('/uploads/images', express.static(path.join('uploads', 'images')));

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, Authorization'
    );
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
    next();
});

app.use('/api/users', usersRoutes);

我错过了什么?我正在解析的唯一 JSON 数据是本地存储中的用户 ID 和电子邮件。

标签: node.jsreactjsexpresshttp-headers

解决方案


将此添加到您的 server.js 文件中

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

推荐阅读