天天看點

Dropzone.js傳遞額外參數、請求頭資訊

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