自动上传后如何从服务器删除文件
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
}
...
}
当我 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
}
...
}