Nodejs 上传图片失败问题求解

Nodejs 上传图片失败问题求解

1.jpg

自己搭建的，2M限制改成20M限制，上传5M多图片就这样了。。。

还有发现图片上传是先上传到服务器，然后服务器上传到七牛？这样慢很多

5 回复

Node.js 上传图片失败问题求解

问题描述

我最近在使用 Node.js 处理图片上传时遇到了一些问题。我尝试将文件大小限制从 2MB 改为 20MB，但是当我上传一个超过 5MB 的图片时，上传过程失败了。此外，我还注意到上传流程是这样的：图片先上传到我的服务器，然后再由服务器上传到七牛云存储服务。这种两步上传的方式导致整个过程变慢了很多。

解决方案

  1. 修改文件大小限制 首先，我们需要确保我们的文件大小限制设置正确。通常我们会使用 multer 这样的中间件来处理文件上传。以下是一个简单的配置示例：

    const multer = require('multer');

// 设置存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 指定文件保存路径
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop())
  }
});

// 设置文件大小限制
const upload = multer({ 
  storage: storage,
  limits: { fileSize: 20 * 1024 * 1024 } // 20MB
});

  2. 优化上传流程 如果你希望减少上传时间，可以考虑直接上传到七牛云存储服务，而不是先上传到自己的服务器。这可以通过七牛云提供的 SDK 来实现。以下是一个简单的示例：

    const qiniu = require('qiniu');

// 设置七牛云认证信息
const accessKey = 'your-access-key';
const secretKey = 'your-secret-key';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const config = new qiniu.conf.Config();
const bucket = 'your-bucket-name';

// 初始化上传操作
const putPolicy = new qiniu.rs.PutPolicy({ scope: bucket });
const uploadToken = putPolicy.uploadToken(mac);

// 上传函数
async function uploadToQiniu(fileStream) {
  return new Promise((resolve, reject) => {
    const formUploader = new qiniu.form_up.FormUploader(config);
    const putExtra = new qiniu.form_up.PutExtra();
    formUploader.put(uploadToken, fileStream.name, fileStream, putExtra, (err, respBody, respInfo) => {
      if (err) {
        reject(err);
      } else {
        if (respInfo.statusCode == 200) {
          resolve(respBody);
        } else {
          reject(new Error(`Upload failed with status code ${respInfo.statusCode}`));
        }
      }
    });
  });
}

// 使用示例
app.post('/upload', upload.single('image'), async (req, res) => {
  try {
    const result = await uploadToQiniu(req.file);
    res.json(result);
  } catch (error) {
    console.error(error);
    res.status(500).send('Upload failed');
  }
});

通过以上方法，你可以解决上传失败的问题，并优化上传流程以提高效率。希望这些解决方案对你有所帮助！


这是用什么插件实现的？

如果没超过限制的话，应该就是网络不好。

话说七牛在国外的访问速度一直不行

根据你的描述，Node.js 在处理大文件上传时遇到了问题。以下是一些可能的原因和解决方案：

1. 文件大小限制

默认情况下，express 或其他中间件可能会有文件大小限制。你可以使用 multer 中间件来配置文件大小限制。

示例代码：

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

const app = express();
const upload = multer({ limits: { fileSize: 20 * 1024 * 1024 } }); // 20MB limit

app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    // 处理文件上传逻辑
    res.send('File uploaded successfully.');
});

app.listen(3000, () => console.log('Server started on port 3000'));

2. 优化上传流程

如果你发现图片先上传到服务器再上传到七牛，这确实会增加延迟。可以考虑直接将文件流发送到七牛云存储服务，以减少延迟。

示例代码：

const qiniu = require('qiniu');
const fs = require('fs');
const path = require('path');

// 配置七牛云存储
qiniu.conf.ACCESS_KEY = 'your-access-key';
qiniu.conf.SECRET_KEY = 'your-secret-key';

const bucket = 'your-bucket-name';
const putPolicy = new qiniu.rs.PutPolicy(bucket);
const uptoken = putPolicy.token();

const form = new multiparty.Form();
form.parse(req, async (err, fields, files) => {
    if (err) {
        return res.status(500).send('Error parsing form data.');
    }

    const inputFile = files.file[0];
    const reader = fs.createReadStream(inputFile.path);
    const key = path.basename(inputFile.originalFilename);

    const extra = new qiniu.io.PutExtra();
    qiniu.io.putStream(uptoken, key, reader, extra, (err, ret) => {
        if (err) {
            return res.status(500).send('Failed to upload file to Qiniu.');
        }
        res.send(`File uploaded successfully to Qiniu with key ${ret.key}`);
    });
});

通过上述配置和代码示例，你可以更好地处理大文件上传，并优化上传流程。

回到顶部