标签：load 文件大小 回显 Filepond image js 重试 文件 上传
结论
默认颜值很高，而且提供了很多插件，但是它这个回显有点怪异，它需要你提供一个唯一标志，然后会通过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',
}
);
标签：load,文件大小,回显,Filepond,image,js,重试,文件,上传 来源： https://www.cnblogs.com/lujiahao/p/15706326.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。