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

How to delete file from the server after auto upload

当我 select 一张图片时,它会自动上传我想要的图片,然后使用 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'
}

您必须创建一个 revert api 端点服务器端,您可以在其中通过删除之前上传的文件手动清理。您必须在组件上指定 link :

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

我解决这个问题的方法是使用它的事件“removefile”,因为在那里你可以调用你的端点并像欧内斯特所说的那样删除文件......“手动”。

你最后是怎么解决的?

Vuejs...示例

template...
    <file-pond ref="pond" name="filePondImages" @init="handleFilePondInit" @removefile="onDeleteImageCall" :files="innerImages" />

script...
  methods: {
    onDeleteImageCall(error, file){
       if(error){ ... }
    
       ... code here
    }
    ...
   }