结论

默认颜值很高，而且提供了很多插件，但是它这个回显有点怪异，它需要你提供一个唯一标志，然后会通过load()方法发送请求请求已经上传的资源(图片，文件等)，然后会自动读取文件的大小和文件名称参考地址：https://pqina.nl/filepond/docs/api/server/#load

这一点和以往使用过的文件上传插件有点不同，而且不太适应，Filepond.js是免费开源的。但是官网演示的那种酷炫的图片编辑效果，是需要Pintura插件来驱动的，插件是收费的。


我们单纯的用来做文件上传的话，是不用管的，可以放心使用。

使用

也是研究了好一会儿才弄清楚它这个最基本的使用

css

    <!-- Filepond CSS -->
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <!--    FilePondPluginImagePreview 插件 CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
          rel="stylesheet">
    <!--    FilePondPluginImageEdit 插件 CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css" rel="stylesheet">
    <link
            href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css"
            rel="stylesheet"
    />

html

	 <div id="file"></div>

js

        const inputElement = document.querySelector('#file');

        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginFileValidateSize,
            FilePondPluginFileValidateType,
        );


        FilePond.setOptions({

            //表单名称
            name: 'file',
            // 设置单个URL是定义服务器配置的最基本形式。
            server: {
                //请求接口
                fetch: null,
                //还原接口
                revert: null,
                // load: (source, load, error) => {
                //     console.log(source, load, error);
                // },
                load: '/',
                process: {
                    url: '<{url('/article/cover')}>',
                    timeout: 7000,
                    method: 'POST',
                    headers: {
                        'x-customheader': 'Hello World',
                    },
                    withCredentials: false,
                    onl oad: (response) => console.log(response),
                    one rror: function (res) {
                        console.log("dsadsa");
                        return "上传错误啊啊啊";
                    },
                    ondata: (formData) => {
                        formData.append('Hello', 'World');
                        return formData;
                    },
                },

                //文件回显之后左边那个关闭按钮回调
                remove: (source, load, error) => {
                    // alert("dsadsa");
                    // Should somehow send `source` to server so server can remove the file with this source
                    // Can call the error method if something is wrong, should exit after
                    error('oh my goodness');
                    // Should call the load method when done, no parameters required
                    load();
                },

            },
            //false:上传失败不显示重试按钮 true:上传失败显示重试按钮(点击重试请求的是process配置的url接口)
            allowProcess: true,

            //关闭广告
            credits: false,
            // .jpg .gif .png .jpeg
            acceptedFileTypes: ['image/gif', 'image/png', 'image/jpeg'],
            //验证无效时提醒的映射
            fileValidateTypeLabelExpectedTypesMap: {'image/gif': '.gif', 'image/png': '.png', 'image/jpeg': '.jpg'},
            maxFileSize: '2MB',
            maxTotalFileSize: '6MB',
            //允许多选
            allowMultiple: true,
            //最大上传的文件数量
            maxFiles: 3,
            //并行上传最大文件数
            maxParallelUploads: 2,
            labelIdle: '拖放文件，或者 <span class="filepond--label-action"> 浏览 </span>',
            labelInvalidField: '字段包含无效文件',
            labelFileWaitingForSize: '计算文件大小',
            labelFileSizeNotAvailable: '文件大小不可用',
            labelFileLoading: '加载',
            labelFileLoadError: '加载错误',
            labelFileProcessing: '上传',
            labelFileProcessingComplete: '已上传',
            labelFileProcessingAborted: '上传已取消',
            labelFileProcessingError: '上传出错',
            labelFileProcessingRevertError: '还原出错',
            labelFileRemoveError: '删除出错',
            labelTapToCancel: '点击取消',
            labelTapToRetry: '点击重试',
            labelTapToUndo: '点击撤消',
            labelButtonRemoveItem: '删除',
            labelButtonAbortItemLoad: '中止',
            labelButtonRetryItemLoad: '重试',
            labelButtonAbortItemProcessing: '取消',
            labelButtonUndoItemProcessing: '撤消',
            labelButtonRetryItemProcessing: '重试',
            labelButtonProcessItem: '上传',
            labelMaxFileSizeExceeded: '文件太大',
            labelMaxFileSize: '最大值: {filesize}',
            labelMaxTotalFileSizeExceeded: '超过最大文件大小',
            labelMaxTotalFileSize: '最大文件大小：{filesize}',
            labelFileTypeNotAllowed: '文件类型无效',
            fileValidateTypeLabelExpectedTypes: '应为 {allButLastType} 或 {lastType}',
            imageValidateSizeLabelFormatError: '不支持图像类型',
            imageValidateSizeLabelImageSizeTooSmall: '图像太小',
            imageValidateSizeLabelImageSizeTooBig: '图像太大',
            imageValidateSizeLabelExpectedMinSize: '最小值: {minWidth} × {minHeight}',
            imageValidateSizeLabelExpectedMaxSize: '最大值: {maxWidth} × {maxHeight}',
            imageValidateSizeLabelImageResolutionTooLow: '分辨率太低',
            imageValidateSizeLabelImageResolutionTooHigh: '分辨率太高',
            imageValidateSizeLabelExpectedMinResolution: '最小分辨率：{minResolution}',
            imageValidateSizeLabelExpectedMaxResolution: '最大分辨率：{maxResolution}'
        });

效果

回显

主要是通过实例化对象，调用 addFile，第一个参数是唯一标志，第二个参数是固定格式，然后它会把唯一标志，以get方式拼接到 配置项server中load提供的接口地址中发起一个请求，会自动读取到文件大小，服务端需要返回一个文件对象，同时还需要携带文件名。

        pond.addFile('/uploads/article/1/20211217/12c063a69ea359cb60540b9f3fe996f12.jpg',
            {
                type: 'local',
            }
        );

        pond.addFile('/uploads/article/1/20211214/2a5fd8c52150f7fc4658daa07fe7b9bb.rar',
            {
                type: 'local',
            }
        );