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}`, ''));
});
}
});