手机端无法限制图片类型，上传后也没有返回错误消息

[webkeji]

[Dincat]

这两天做项目用这组件也遇到了这个问题，我通过修改源码的方式解决了

1、首先把组件源码下载下来，放到自己项目的组件目录里（要用源码里src目录下的所有文件，不要用dist目录下的文件）；

2、打开vue-core-image-upload.vue文件，修改change(e)方法如下：

change(e) {
        let fileVal = document.querySelector('#g-core-upload-input-' + this.formID).value.replace(/C:\\fakepath\\/i, "");
        let fileExt = fileVal.substring(fileVal.lastIndexOf(".") + 1);


        let noExt = false;
        const extensionsArr = this.extensions.split(',');
        if(extensionsArr.length>1) {
            var reg = new RegExp('^[' + extensionsArr.join('|') + ']+$','i');
            if (!reg.test(fileExt)) {
                //return this.__dispatch('errorhandle','TYPE ERROR');
              noExt = true;
              fileExt='png';
            }
        }

        if (e.target.files[0].size > this.maxFileSize) {
            var formatSize;
            if (parseInt(this.maxFileSize / 1024 / 1024) > 0) {
                formatSize = (this.maxFileSize / 1024 / 1024).toFixed(2) + 'MB';
            } else if (parseInt(this.maxFileSize / 1024) > 0) {
                formatSize = (this.maxFileSize / 1024).toFixed(2) + 'kB';
            } else {
                formatSize = options.maxFileSize.toFixed(2) + 'Byte';
            }
            console.warn('FILE IS TOO LARGER MAX FILE IS ' + formatSize);
            return this.__dispatch('errorhandle','FILE IS TOO LARGER MAX FILE IS ' + formatSize);
        }

        if (this.multipleSize > 0 && e.target.files.length > this.multipleSize) {
              console.warn('FILE NUM IS LARGER THAN ' + this.multipleSize);
              return this.__dispatch('errorhandle', 'FILE NUM OVERLOAD');
          }

        this.files = e.target.files;
        if (this.crop || this.resize) {
          this.__showImage();
          return;
        }
        this. __dispatch('imagechanged', this.files.length > 1 ? this.files : this.files[0]);

        if (noExt) {
          var file111 = this.files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file111);

          let that=this;

          reader.onload = function (e) {

            that.tryAjaxUpload('', true, this.result);
          }


        } else if (this.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
          canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
            this.tryAjaxUpload('', true, code);
          });
        } else {
          this.tryAjaxUpload();
        }
      }

我的做法其实就是获取不到扩展名的时候，不报错跳出，让代码继续执行下去，上传那块就不压缩图片了，使用base64上传。

另外，上传后台，如果是通过文件名获取扩展名，也是获取不到的，建议使用文件的MIME/Type来补上扩展名。

3、修改引用的地方为： import VueCoreImageUpload from "@components/VueCoreImageUpload/vue-core-image-upload";

项目要求不高，我就没有继续优化了，以上代码还有继续优化的空间，欢迎拍砖~~