我是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);
}
});
任何关于这方面的帮助或指导都是非常好的。
2条答案
按热度按时间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;
到dphi5xsq2#
我建议你用multer这里有个链接
后端代码示例:
前端代码示例(我在react native中实现了此示例):