--- 解决vue上传gif图片到java后台 gif图片却不动的问题。 --- # 简介 这个问题折腾了一个多小时,各种查资料,刚开始一直都认为是自己的后台保存文件的代码有问题,最后才突然意识到,莫不是vue前端上传的问题?最终发现原来是upload上传图片时大于200K的图片会压缩,结果我这个gif被压缩导致丢帧了。。。 ## 1. java后台上传图片代码 比较常见的代码,根据文件扩展名选择上传逻辑 ```java // 写入文件 File file = new File(localPath + path + fileName); String ext = "." + fileName.split("\\.")[1]; switch (Objects.requireNonNull(FileExtEnum.getFileExt(ext))) { case MD: case TXT: BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream)); BufferedWriter writer = new BufferedWriter(new FileWriter(file)); while (reader.ready()) { writer.write((char) reader.read()); } writer.flush(); writer.close(); reader.close(); break; case GIF: FileOutputStream fos = new FileOutputStream(file); FileInputStream fs = (FileInputStream) inputStream; byte[] buffer = new byte[1024]; int len = 0; while ((len = fs.read(buffer)) != -1) { fos.write(buffer, 0, len); } fos.close(); fs.close(); break; default: BufferedInputStream bis = new BufferedInputStream(inputStream); BufferedOutputStream bos = new BufferedOutputStream(Files.newOutputStream(file.toPath())); byte[] bytes = new byte[1024]; int length; while ((length = bis.read(bytes)) != -1) { bos.write(bytes, 0, length); } bos.flush(); bos.close(); bis.close(); break; } ``` ## 2. vue端上传逻辑,问题就出在压缩这里,后来加了如果是gif则不压缩的判断后就正常了 ```javascript uploadImg(pos, file) { var formdata = new FormData(); // console.log('file.type:', file.type) const isGIF = file.type === 'image/gif' if(isGIF || file.size / 1024 < this.config.UPLOAD_SIZE){ // 如果是gif则不压缩 formdata.append("file", file); this.axios .post("/api/admin/articles/images", formdata) .then(({ data }) => { this.$refs.md.$img2Url(pos, data.data); }); } else { // 压缩到200KB,这里的200就是要压缩的大小,可自定义 imageConversion .compressAccurately(file, this.config.UPLOAD_SIZE) .then(res => { formdata.append( "file", new window.File([res], file.name, { type: file.type }) ); this.axios .post("/api/admin/articles/images", formdata) .then(({ data }) => { this.$refs.md.$img2Url(pos, data.data); }); }); } }, ``` # 时间真不值钱,一个小问题折腾一个小时
打赏
  • 微信
  • 支付宝

评论
来发评论吧~