Question

当我选择一个图像时，它会自动上传我想要的图像，然后使用 Node.js 和 Multer 我重命名文件以使其唯一并将其保存到磁盘。但是，一旦上传完成，进度加载器就会变成“X”并且可以删除文件。当我单击该图像时，该图像已从 react 中删除，但仍保留在服务器上。

在反应中：

          <FilePond
            files={files}
            onupdatefiles={setFiles}
            allowMultiple={false}
            maxFiles={1}
            server="http://localhost:8000/api/v1/users/update-avatar"
            name="image"
            labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
          />

在 Node.js 中

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

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

router.post(
  "/update-avatar",
  fileUpload.single("image"),
  userController.updateAvatar
);

如果我 console.log 'file' 我只会得到下面的内容，因为我重命名了文件。

{
  fieldname: 'image',
  originalname: 'bob.png',
  encoding: '7bit',
  mimetype: 'image/png'
}

Answer 1

您必须创建一个 revert api 端点服务器端，您可以通过删除之前上传的文件手动清理。您必须在组件上指定该链接：

<FilePond
      server={{
        process: {
          url: "/api/v1/users/update-avatar"
        },
        revert: {
          url: "/api/v1/users/revert-avatar",
        }
     }}
     // ...
/>

自动上传后如何从服务器删除文件

1 个答案: