如何防止FilePond同时为成功、空闲和失败创建覆盖？
如何防止FilePond同时为成功、空闲和失败创建覆盖？
提问于 2022-05-11 09:24:34
我已经使用FilePond为我的图像预览插件组件启用了图像预览。但是，当上传图像时，预览已经被创建，用于当图像成功、空闲或失败时，这会导致图像预览被从容器中向下推下(如图中所示)。下面列出了我正在使用的其他插件和我的FilePond配置。
附加插件：
FilePond配置：
document.addEventListener('DOMContentLoaded', function(event) {
gopond();
})
function gopond() {
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize,
FilePondPluginFileValidateType,
FilePondPluginImageTransform,
FilePondPluginFileMetadata,
FilePondPluginImageResize,
FilePondPluginImagePreview,
);
var uploadedFiles = [];
const pond = new FilePond.create(document.querySelector("#filepond"), {
maxFiles: 12,
credits: false,
allowMultiple: true,
allowFileEncode: true,
allowPaste: false,
allowRemove: false,
allowRevert: false,
allowFileMetadata: true,
allowImageTransform: true,
allowImageResize: true,
allowImagePreview: true,
imageResizeTargetWidth: '1200px',
imageResizeTargetHeight: '675px',
imageResizeMode: 'cover',
maxFileSize: "30MB",
acceptedFileTypes: [
'image/png',
'image/jpeg',
'image/jpg',
'video/mp4',
'video/mov'
],
fileMetadataObject: {
markup: [
[
'rect',
{
left: 0,
right: 0,
bottom: 0,
height: '85px',
backgroundColor: 'rgba(55, 65, 81, 0.15)',
},
],
[
'image',
{
right: '10px',
bottom: '0px',
width: '333.33px',
height: '94.33px',
src: 'https://headturned-public.s3.eu-west-2.amazonaws.com/logo/headturned-linear.png',
fit: 'contain',
},
],
],
},
server: {
timeout: 30000,
process: function(fieldName, file, metadata, load, error, progress, abort) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
fetch("/signer", {
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "request",
"X-CSRF-Token": "{{ csrf_token() }}",
},
method: "post",
credentials: "same-origin",
body: JSON.stringify({
fileName: metadata.fileInfo.filenameWithoutExtension,
fileExtension: metadata.fileInfo.fileExtension,
fileType: metadata.fileInfo.fileType
})
})
.then(function(response) {
return response.json();
})
.then(function(json) {
file.additionalData = json.additionalData;
for (var field in file.additionalData) {
formData.append(field, file.additionalData[field]);
}
formData.append("file", file);
xhr.upload.onprogress = function(e) {
progress(e.lengthComputable, e.loaded, e.total);
};
xhr.open("POST", json.attributes.action);
xhr.onload = function() {
load(`${ file.additionalData.key }`);
};
xhr.send(formData);
uploadedFiles.push(file.additionalData.key);
});
return {
abort: (function() {
xhr.abort();
abort();
})
};
}
}
});
pond.on("addfile", function(error, file) {
if (error) {
return;
}
file.setMetadata('fileInfo', {
filenameWithoutExtension: file.filenameWithoutExtension,
fileExtension: file.fileExtension,
fileType: file.fileType
});
});
pond.on("processfiles", function() {
Livewire.emit('storeImages', uploadedFiles)
})
}<html>
<head>
<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
</head>
<body>
<input type="file" id="filepond" multiple />
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.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-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.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-file-metadata/dist/filepond-plugin-file-metadata.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
</body>
</html>
上传图片时问题的图像：
检查元素的代码图像：
回答 1
Stack Overflow用户
发布于 2022-05-14 07:20:58
它看起来像图像预览插件中包含的CSS文件没有加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72198541
复制相关文章
相似问题
腾讯云开发者
