无法使用获取javascript发送大负载

b5lpy0ml  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(343)

我是javascript和nodejs领域的初学者。我试图用nodejs创建一个简单的文件上传项目。此外,我在nodejs中创建了路由,从网页中捕获图像,并使用fetch将其发送到nodejs路由。这是html文件:

<div class="file-upload">
    <div class="image-upload-wrap">
        <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
        <div class="drag-text">
        <h3>Drag and drop a file or select add Image</h3>
        </div>
    </div>
    <div class="file-upload-content">
        <div class="file-upload-display">
            <img id="file-upload-image" class="file-upload-image" src="#" alt="your image" />
            <div class="image-title-wrap">
                <button type="button" onclick="removeUpload()" class="remove-image"><i class="fas fa-trash-alt"></i> Remove <span class="image-title">Uploaded Image</span></button>
            </div>
        </div>
    </div>
</div>
<br>
<div class="file-upload-server d-flex justify-content-center">
    <button class="btn btn-expand-lg btn-primary" onclick="uploadFile()"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
</div>

这是我的javascript文件:

async function uploadFile() {
    let img = document.getElementById('file-upload-image').src;
    console.log('Image String Length: ' + img.length);
    const payload = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            file: img, 
        })
    }
    console.log(`Payload: ${JSON.stringify(payload)}`);

   await fetch('http://localhost:3030/image/uploadimage', payload)
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}

这里的图像是base64编码的字符串,我将其传递给我的nodejs路由。
单击“上载”按钮时,出现以下错误:

我用一个大小为5.72kb的图像测试了这段代码,它可以正常工作。但是当我尝试上传一个81.7kb大小的图像时,它失败了,出现了这个错误。
这是nodejs路由:

router.use(imageupload({
   limits: { fileSize: 50 * 1024 * 1024 },
}));

router.use(express.urlencoded({limit: '50mb', extended: true}));
router.use(express.json());

const decodeBase64Image = (dataString) => {
  let matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
  response = {};
  if (matches.length !== 3) {
    return new Error('Invalid input string');
  }
  response.type = matches[1];
  response.data = Buffer.from(matches[2], 'base64');
  return response;
}

router.post('/uploadimage', cors(corsOptions), async (req, res) => {
     let decodedImage = decodeBase64Image(req.body.file); 
     let imageBuffer = decodedImage.data;
     let type = decodedImage.type;
     let extension = mime.getExtension(type);
     let NewImageName =  Math.random().toString(36).substring(7);
     let fileName = 'image-' + NewImageName + '.' + extension;
     try {
           fs.writeFile(`${path.join(__dirname, '../')}/public/uploads/${fileName}`, 
           imageBuffer, function(err) {
           if(err) throw err;
           console.log('The file was uploaded successfully');
           return res.status(200).json({status: 'success', message: 'File uploaded successfully'});
    });
    } catch(err) { 
          console.log(err);
          return res.status(500).send(err);
    }
});

任何关于这方面的帮助或指导都是非常好的。

vpfxa7rd

vpfxa7rd1#

您需要为您的应用程序设置上载限制 express.json() 中间件,因为您正在使用 'Content-Type': 'application/json' post请求中的标题。
试着替换 router.use(express.json()) 具有 router.use(express.json({ limit: '50mb'}) 文档

编辑

错误 Unexpected token < in JSON at position 0' 如果您尝试使用 response.json() 它的格式不是 json . 您可以在nodejs中以一行代码的形式将其复制为 JSON.parse('I am no json...') 如果你打电话 response.json() 在客户端上,它必须正确格式化 json 否则会导致错误。为此,请使用 res.json() 而不是 res.send() .
您还应确保始终回复客户,因此更改线路 if(err) throw err;

if(err) { 
  console.error(err)
  // always send back a status, 500 means server error.. 
  res.status(500).json('Internal server error')
  return
}
dphi5xsq

dphi5xsq2#

我建议你用multer这里有个链接
后端代码示例:

var multer = require('multer')
var signature = multer.diskStorage({
destination: function (req, file, cb) {
    cb(null, './public/')
},
filename: function (req, file, cb) {
    if (file.mimetype == 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png' || file.mimetype === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        cb(null, Date.now() + file.originalname)
    } else {
        cb({ error: 'Image type not supported' })
    }
}
})

var uploadSignature = multer({ storage: signature })

router.put('/updateWorkOrderForSign',uploadSignature.array('signature', 1), function (req, res) {

try {
if (req.body.signature) {
var base64Data = req.body.signature.replace(/^data:image\/png;base64,/, "");

 let rString = Math.random().toString(36).substring(7);
 let date = Date.now();
 let imageName = '/' + date + rString + '.png';
 let imagePath = '/public' + imageName;

 require("fs").writeFile('./' + imagePath, base64Data, 'base64', function (err) {
  if (err) {
      log.error('SAVE IMAGE FAILED WITH ERROR: ', err);
   } else {
      log.info('Signature image saved successfully')
   }
  });
  } else {
          //nothing to do
          log.error("No signature image present")
  }

  } catch (err) {
          log.error('ERROR WHILE CONVERTING BASE64 TO IMAGE: ', err);
  }
})

前端代码示例(我在react native中实现了此示例):

async function uploadFile() {
    let imageObject = {
              uri: image.path,
              type: 'image/png',
              name: 'signatureImage'
             }

    var form = new FormData();
        form.append('signature', imageObject)
        form.append(‘task’Id, taskId);

    await fetch(urlStr, {
                          method: 'PUT',
                          headers: {
                                  'Authorization': bearerToken,
                                   Accept: 'application/json',
                                  'Content-Type': 'multipart/form-data'},
                          body: params,
                })
                  .then(response => response.json())
                  .then(responseData => {
                        var result = JSON.stringify(responseData);
                        return result;
                   })
                  .catch(error => {
                       console.log('ERROR WHILE UPLOADING IMAGE: ',error)
                  });
}

相关问题