引言

因项目需要，需要文件上传插件，在GitHub找到了FilePone。项目官网
引入css、js。
FilePone使用简单，可以配合主流前端框架vue、react、angular等使用，可用作用户头像编辑+上传，个人觉得挺好用的。
工作流程(官方解释)：

1. FilePond uploads file my-file.jpg as multipart/form-data using a POST request
2. server saves file to unique location tmp/12345/my-file.jpg
3. server returns unique location id 12345 in text/plain response
4. FilePond stores unique id 12345 in a hidden input field
5. client submits the FilePond parent form containing the hidden input field with the unique id
6. server uses the unique id to move tmp/12345/my-file.jpg to its final location and remove the tmp/12345 folder

基础配置

1. CDN

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<input type="file">

<script>
        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create(inputElement, {
            labelIdle: '拖动到此区域或<span class="filepond--label-action" tabindex="0">文件选择</span>',
        });
        FilePond.setOptions({
            server: '/firms/firmpic'
        });
</script>

2. npm

注意：需要nodejs支持

$ npm i filepond --save
import * as FilePond from 'filepond';
import 'filepond/dist/filepond.min.css';

配置预览

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize
    );
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
        labelIdle: '拖动到此区域或<span class="filepond--label-action" tabindex="0">文件选择</span>',
    });
    FilePond.setOptions({
        server: '/firms/firmpic'
    });
</script>

Nodejs调用

说明：配合multer使用

router.post('/firmpic',upload.any(),function(req,res){
    console.log(req.files[0].path)
    res.setHeader('Content-Type','text/plain');
    res.end(req.files[0].path)
});
// 删除上传的文件
router.delete('/firmpic',function(req,res){
    let filepath='';
    req.on('data',chunk=>{
        filepath+=chunk;
    })
    req.on('end',function(){
       let realpath= require('path').join(__dirname,'../'+filepath);
       require('fs').unlink(realpath,err=>{
           if(err) console.log('删除失败');
           console.log('删除成功');
           res.end()
       })
    });
});