Vuelidate не проверяет тип файла zip, добавленный только из Windows - PullRequest
0 голосов
/ 02 января 2019

Я добавил Vuelidate для проверки форм в Vue Component. Вот код для проверки части в разметке:

 <input name="attachment"
                               v-validate="'mimes:image/*,pdf,doc,docx,xls,xlsx,pdf,zip|size:100000'"
                               type="file"
                               @change="onAttachmentChange"/>

Это хорошо работает всякий раз, когда файл .zip добавляется с устройств, отличных от ОС Windows. Но когда я загружаю файл .zip из ОС Windows, он показывает ошибку проверки для файла, который не имеет допустимого типа файла. Проверка также работает корректно для других критериев, но проверка не работает только для типа файла .zip, загруженного из ОС Windows.

Вот соответствующие коды для этой части проверки:

export default {
    name: 'CreateNewsComponent',
    data() {
        return {
            createNews: false,
            title: "",
            description: "",
            image: "",
            video: "",
            video_thumbnails: "",
            attachment: "",
            uploading: {
                'image': false,
                'video': false,
                'video_thumbnails': false,
                'attachment': false
            },
        }
    },
    methods: {
        postNews() {
            this.$validator.validate().then(result => {
                if (result) {
                    this.errors.clear();

                    this.$store.commit('employer/toggleLoader', true);

                    let _current = this;
                    axios.post('/news', {
                        title: this.title,
                        description: this.description,
                        image: this.image,
                        video: this.video,
                        video_thumbnails: this.video_thumbnails,
                        attachment: this.attachment,
                        user_id: "OAM",

                    })
                    .then(function (response) {
                        if (response.data.sucess === false) {
                            _current.showNotification('error', response.data.message);
                        } else {
                            _current.$bus.$emit('__OMA__refreshNews');
                            _current.showNotification('success', 'Successfully created news.');
                            _current.resetForm();
                        }
                        _current.$store.commit('employer/toggleLoader', false);

                    })
                    .catch(function (err) {
                        console.log(err);
                        _current.errors = error.message;
                        _current.showNotification('error', err.message);
                        _current.$store.commit('employer/toggleLoader', false);
                    });
                }
            });
        },
        toggleNewsCreateFrom(e) {
            this.resetForm();
            this.createNews = !this.createNews;
        },
        onImageChange(e) {
            this.uploading.image = true;
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            this.createImage(files[0]);
        },
        onVideoThumbnailChange(e) {
            this.uploading.video_thumbnails = true;
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            this.createVideoThumbnail(files[0]);
        },
        createImage(file) {
            let image = new Image();
            let reader = new FileReader();
            let vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
                vm.uploadFile(file, 'image');
            };
            reader.readAsDataURL(file);
        },
        createVideoThumbnail(file) {
            let reader = new FileReader();
            let vm = this;

            reader.onload = (e) => {
                vm.video_thumbnails = e.target.result;
                vm.uploadFile(file, 'video_thumbnails');
            };
            reader.readAsDataURL(file);
        },
        onVideoChange(event) {
            this.uploading.video = true;
            return new Promise((resolve, reject) => {

                if (event.target.files && event.target.files.length > 0) {
                    this.uploadFile(event.target.files[0], 'video');
                    resolve();
                } else {
                    console.log("Error!! uploading video");
                    reject();
                }
            });
        },
        onAttachmentChange(event) {
            this.uploading.attachment = true;
            return new Promise((resolve, reject) => {
                if (event.target.files && event.target.files.length > 0) {
                    this.uploading.attachment = true;
                    this.uploadFile(event.target.files[0], 'attachment');
                    resolve();
                } else {
                    console.log("Error!! uploading attachment");
                    reject();
                }
            });
        },
        removeFile: function (fileType) {
            this[fileType] = '';
        },
        resetForm() {
            this.createNews = false;
            this.title = "";
            this.description = "";
            this.image = "";
            this.video = "";
            this.video_thumbnails = "";
            this.attachment = "";
            this.errors.clear();
            this.uploading.image = false;
            this.uploading.video = false;
            this.uploading.video_thumbnails = false;
            this.uploading.attachment = false;
        },
        showNotification(type, message) {
            this.$notify({
                group: 'employer',
                title: 'Important message',
                text: message,
                type: type,
            });
        },
        uploadFile(file, type) {
            this.uploading[type] = true;
            let vm = this;

            let formData = new FormData();
            formData.append(type, file);

            axios.post('/news/file/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
                .then((response) => {
                    if (response.data.success === false) {
                        vm.showNotification('error', response.data.message);
                        vm[type] = '';
                        vm.uploading[type] = false;
                        return;
                    }
                    vm[type] = response.data.url;
                    vm.uploading[type] = false;
                })
                .catch((err) => {
                    console.warn(err);
                    vm.showNotification('error', err.message);
                    vm[type] = '';
                    vm.uploading[type] = false;
                });
        }
    }
}
...