如何使用 gridfs 通过 axios 发送图像？

Question

如何使用 axios 在通过 an 上传到后端的 reactjs 中发送 file/image？简单的输入形式是这样的：

<form className={classes.form} onSubmit={handleSubmit(submitFunc)}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <input
              type="file"
              accept="image/*"
              alt="file"
              name="file"
              id="file"
            />
          </Grid>
        </Grid>

        <Button
          type="submit"
        >
          Add
        </Button>
      </form>

提交函数：

try {
  await axios
    .post(`http://localhost:5000/addPic`, data, {
      headers: {
        accept: "application/json",
        "Accept-Language": "en-US,en;q=0.8",
        "Content-Type": `multipart/form-data`,
      },
    })
      }
    );
} catch (error) {
  console.log("error");
}

我试过了，但它不起作用，我不知道为什么，因为当我使用邮递员将图像发送到同一个 api 时，它起作用了:

当我使用视图引擎并在后端使用带有 method="POST" 的表单时，它也有效！这是 api 代码：

const conn = mongoose.createConnection(mongoURI);

let gfs;

conn.once("open", () => {
  // Init stream
  gfs = Grid(conn.db, mongoose.mongo);
  gfs.collection("uploads");
});
let tempNameFile;
const storage = new GridFsStorage({
  url: mongoURI,
  file: (req, file) => {
    return new Promise((resolve, reject) => {
      crypto.randomBytes(16, (err, buf) => {
        if (err) {
          return reject(err);
        }
        const filename = buf.toString("hex") + path.extname(file.originalname);
        const fileInfo = {
          filename: filename,
          bucketName: "uploads",
        };
        tempNameFile = filename;
        console.log(tempNameFile);
        resolve(fileInfo);
      });
    });
  },
});
const upload = multer({ storage });

router.post("/", upload.single("file"), async (req, res) => {
  console.log(tempNameFile);
  res.send("good to go");
});

综上所述，我的问题是如何使用简单的输入将图像上传到前端并通过 axios 发送，就像邮递员将图像发送到后端一样由 gridfs 处理并存储在 mongodb 数据库中

Answer 1

由于 Postman 工作正常，您的后端已正确设置。现在进入您的前端。

如果您的数据是 FormData.

的实例，Axios 会处理多部分表单数据

在您的组件中，您可以设置一个状态变量来保存所选文件

const [selectedFile, setSelectedFile] = useState(null);

将 onInput 添加到您的 <input /> 字段，如下所示：

<input onInput={e => setSelectedFile(e.target.files[0])} />

在提交功能中，将文件包裹在FormData中并使用Axios提交

try {
  const data = new FormData();
  data.append("file", selectedFile);
  await axios.post(`http://localhost:5000/addPic`, data);
  /* Do something if upload was successful */
} catch (error) {
  console.log("error");
}

如何使用 gridfs 通过 axios 发送图像？

how to send images through axios using gridfs?

post

mongodb

gridfs

reactjs

axios