javascript - Vuelidate 不验证仅从 Windows 添加的 zip 文件类型

Question

我添加了 Vuelidate 来验证 Vue 组件中的表单。以下是标记中验证部分的代码：

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

每当从 Windows 操作系统以外的设备添加 .zip 文件时，此方法都可以正常工作。但是当我从 Windows 操作系统上传 .zip 文件时，它会显示该文件不是有效文件类型的验证错误。验证也适用于其他条件，但验证仅不适用于从 Windows 操作系统上传的 .zip 文件类型。

以下是此验证部分的相关代码：

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;
                });
        }
    }
}