Open webkeji opened 5 years ago
这两天做项目用这组件也遇到了这个问题,我通过修改源码的方式解决了
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";
项目要求不高,我就没有继续优化了,以上代码还有继续优化的空间,欢迎拍砖~~
这两天做项目用这组件也遇到了这个问题,我通过修改源码的方式解决了
1、首先把组件源码下载下来,放到自己项目的组件目录里(要用源码里src目录下的所有文件,不要用dist目录下的文件);
2、打开vue-core-image-upload.vue文件,修改change(e)方法如下:
我的做法其实就是获取不到扩展名的时候,不报错跳出,让代码继续执行下去,上传那块就不压缩图片了,使用base64上传。
另外,上传后台,如果是通过文件名获取扩展名,也是获取不到的,建议使用文件的MIME/Type来补上扩展名。
3、修改引用的地方为: import VueCoreImageUpload from "@components/VueCoreImageUpload/vue-core-image-upload";
项目要求不高,我就没有继续优化了,以上代码还有继续优化的空间,欢迎拍砖~~