如何在文件上传时自动压缩图像答案

【问题标题】：How to Compress image automaically in file uploading如何在文件上传时自动压缩图像
【发布时间】：2021-01-19 23:50:25
【问题描述】：

上传 4MB 或以上的大尺寸图片时，应自动压缩小于 1MB。任何人都可以告诉如何在 angularjs 中执行此操作。示例文件是，

JSFIDDLE

var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            
            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        })
        .error(function(){
        });
    }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
    
    $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
    
}]);

<div ng-controller = "myCtrl">
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">upload me</button>
</div>

这是使用 angularjs 上传文件的代码。我想上传更多图片。如果我上传大小为 3MB 或 2MB 的图像，则不会显示任何消息，例如“文件大小很大”之类的。它应该自动压缩小于 1MB，并且应该上传该图像。使用 angularjs 有没有可能做到这一点？这在 angularjs 中可行吗？

【问题讨论】：

应该在服务器端完成。你的服务器是什么，是节点吗？
是的，Node 是我的服务器
Compress images on client side before uploading的可能重复
@JorgeFuentesGonzález 我认为这只是调整宽度和高度。但我想将图像压缩到 1MB 以内。
您可以调整宽度/高度，这将减小图像大小，也可以将其导出为您喜欢的压缩格式的 jpg。请仔细阅读帖子。

标签： javascript html angularjs ng-file-upload

【解决方案1】：

是的，Node 是我的服务器

要压缩图像，请使用tinypng nodejs 包

npm install --save tinify

进行身份验证

var tinify = require("tinify");
tinify.key = "YOUR_API_KEY";

压缩文件

var source = tinify.fromFile("unoptimized.jpg");
source.toFile("optimized.jpg");

您还可以从缓冲区（二进制字符串）上传图像并获取压缩的图像数据。

var fs = require("fs");
fs.readFile("unoptimized.jpg", function(err, sourceData) {
  if (err) throw err;
  tinify.fromBuffer(sourceData).toBuffer(function(err, resultData) {
    if (err) throw err;
    // ...
  });
});

您可以进行许多其他令人惊叹的图像处理。查看文档here

【讨论】：

【解决方案2】：

我最近使用 tinify 包为自己解决了这个问题，发现文档有些缺乏。

我有一个 Vue 前端，它使用 vue2dropzone 从用户那里收集文件上传。这些被发送到节点/ Express 后端。我需要压缩文件并将其上传到 S3 实例而不存储在磁盘上。这意味着使用 multer 内存存储。因此无法使用 tinify.fromFile()，因为本地没有存储文件。

在我的图片中间件中：

Const multer = require(“multer”);
const tinify = require("tinify");

tinify.key = "your_key";

exports.singleFile = multer({ storage: multer.memoryStorage() }).fields([{ name: "file", maxCount: 1 }]);

exports.uploadCompImage = async (req, res, next) => {
   try {
      const fileName = `${req.params.name}${path.extname(req.files.file[0].originalname)}`;
      const source = tinify.fromBuffer(req.files.file[0].buffer);
      source.store({
         service: "s3",
         aws_access_key_id: "your_id",
         aws_secret_access_key: "your_key
         region: "your_region",
         headers: {
            "Cache-Control": "public"
         },
         path: `your_bucket/your_folder/${fileName}`
      });
      return res.status(200).send(`path_to_file/${fileName}`)
   } catch (err) {
      console.log(err);
      next(err);
   }
}

然后在我的路由文件中：

Const images = require(“../middleware/images”);

// skipped several lines for brevity

productRouter
      .route("/images/:name")
      .post(images.singleFile, images.uploadCompImage)

这个过程创建一个multer singleFile上传到memoryStorage，使文件在req.files.file[0]（req.files[“file”]因为我在multer字段中指定“file”作为名称，循环通过这个数组如果上传多个）。设置完成后，我得到文件名，通过使用 tinify 从 req.files.file[0].buffer 作为缓冲区读取来设置源。然后我将源设置为我的 s3 实例并发回该文件的公共链接。

希望这个答案对您有所帮助。我绝对可以看到通过更改 multer 选项来更改过程以更改文件的去向甚至将其写入磁盘。

【讨论】：