如何解决Dropzone 显示现有文件并编辑现有图像
我正在使用 Dropzone js 将图像上传到我的应用程序。这在插入页面上工作正常,但我需要能够编辑记录并添加或更改与记录关联的现有图像。整个应用程序使用 Laravel。
我使用以下代码执行此操作,添加了文件,但是当我单击提交按钮时,它说没有文件。
myDropzone.emit("addedfile",mockFile);
myDropzone.emit("thumbnail",mockFile,path);
myDropzone.emit("complete",mockFile);
myDropzone.files.push(mockFile); // added this line
我的 dropzone 选项:
var options = {
autoProcessQueue: false,maxFilesize: 5,// MB
dictRemoveFile: "Remove",addRemoveLinks: true,paramName: "files",maxFiles: 6,parallelUploads: 6,uploadMultiple: true,acceptedFiles:"image/jpeg,image/jpg,image/png",capture: "image/*",previewsContainer: ".dropzone-previews",clickable:'.dropzone-previews',thumbnailMethod: 'crop',timeout: 500000,myAwesomeDropzone : true,autoDiscover :false,init: DropzoneInitializeFunction,ignoreHiddenFiles:true,};
我该怎么做?
解决方法
答案:
我自己找到了我的问题的答案,我也会把它放在下面给你。
此代码是为 Laravel 刀片文件编写的:
@foreach ($product->attachments as $attach)
<?php $path = Helper::image_to_base64(asset($attach->url)); ?>
<script>
$("document").ready(()=>{
var path = "{{ $path }}";
var file = new File([path],"{{ $attach->file_name }}",{type: "{{ $attach->mime_type }}",lastModified: {{ $attach->updated_at}}})
file['status'] = "queued";
file['status'] = "queued";
file['previewElement'] = "div.dz-preview.dz-image-preview";
file['previewTemplate'] = "div.dz-preview.dz-image-preview";
file['_removeLink'] = "a.dz-remove";
file['webkitRelativePath'] = "";
file['width'] = 500;
file['height'] = 500;
file['accepted'] = true;
file['dataURL'] = path;
file['upload'] = {
bytesSent: 0,filename: "{{ $attach->file_name }}",progress: 0,total: {{ $attach->file_size }},uuid: "{{ md5($attach->id) }}",};
myDropzone.emit("addedfile",file,path);
myDropzone.emit("thumbnail",path);
// myDropzone.emit("complete",itemInfo);
// myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
myDropzone.files.push(file);
console.log(file);
});
</script>
@endforeach
,
答案:
我自己找到了我的问题的答案,我也会把它放在下面给你。
此代码是为 Laravel 刀片文件编写的:
@foreach ($product->attachments as $attach)
<?php $path = Helper::image_to_base64(asset($attach->url)); ?>
<script>
$("document").ready(()=>{
var path = "{{ $path }}";
var file = new File([path],lastModified: {{ $attach->updated_at}}})
file['status'] = "queued";
file['status'] = "queued";
file['previewElement'] = "div.dz-preview.dz-image-preview";
file['previewTemplate'] = "div.dz-preview.dz-image-preview";
file['_removeLink'] = "a.dz-remove";
file['webkitRelativePath'] = "";
file['width'] = 500;
file['height'] = 500;
file['accepted'] = true;
file['dataURL'] = path;
file['upload'] = {
bytesSent: 0,};
myDropzone.emit("addedfile",path);
myDropzone.emit("thumbnail",path);
// myDropzone.emit("complete",itemInfo);
// myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
myDropzone.files.push(file);
console.log(file);
});
</script>
@endforeach
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。