let myDropzone = new Dropzone("#my-element", {
url: "<{url('/article/cover')}>",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
paramName: "file", // 預設為file
maxFiles: 3,// 一次性上傳的檔案數量上限
maxFilesize: 5, // 檔案大小,機關:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg,.mp3", // 上傳的類型
addRemoveLinks: true,
parallelUploads: 1,// 一次上傳的檔案數量
dictDefaultMessage: '拖動檔案至此或者點選上傳(最多3張)',
dictMaxFilesExceeded: "最多隻能上傳3張封面",
dictResponseError: '檔案上傳失敗!',
dictInvalidFileType: "檔案類型隻能是*.jpg,*.gif,*.png,*.jpeg",
dictFallbackMessage: "浏覽器不受支援",
dictFileTooBig: "最大隻能上傳2M大小的封面.",
dictRemoveLinks: "删除",
dictRemoveFile: "删除",
dictCancelUpload: "取消",
init: function () {
// this.on("sending", function (file, xhr, formData) {
// formData.append("_token", $('meta[name="csrf-token"]').attr('content'));
// });
this.on("complete", function (file) {
//後端允許的圖檔類型
if (file.aaa === '1') {
//這裡是成功還是失敗都會觸發的方法
//我的處理場景是,回顯非圖檔檔案的時候可能會用到
$(file.previewTemplate).find('.dz-image img').hide();
$(file.previewTemplate).find('.dz-details').css('opacity', '1');
}
});
this.on("addedfile", function (file) {
if (this.files.length > this.options.maxFiles) {
this.removeFile(file);
//可以給一個提示回調
// Toast.fire({icon: "error", title: '最大隻能選擇3張文章封面'});
}
});
this.on("success", function (file, response) {
if (response.code === 200) {
//綁定到file對象上,用于删除的時候修改隐藏域的值
file.file_id = response.data.id;
// 解決表單送出時,圖檔以#隔開解決
let val = $('#pic').val();
let tmp = val + '#' + response.data.id;
$('#pic').val(tmp);
} else {
//檔案上傳失敗
$(file.previewTemplate).removeClass('dz-processing dz-image-preview dz-success').addClass('dz-error');
$(file.previewTemplate).find('.dz-error-message span').text(response.msg);
}
});
this.on("removedfile", function (file) {
if (this.files.length === 0) {
$('.dz-default').trigger('dz-hide-default');
} else {
$('.dz-default').trigger('dz-hide-default');
}
//把删除的檔案從隐藏域删除
$('#pic').val($('#pic').val().replace(`#${file.file_id}`, ''));
});
}
});