Question

在上传4MB或更大尺寸图像时，它应自动压缩不到1MB。任何人都可以告诉你如何在angularjs中做到这一点。示例文件是

＆＃13;

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

＆＃13;

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

＆＃13;

这是使用angularjs上传文件的代码。我想上传更多图片。如果我上传大小为3MB或2MB的图片，则不会显示任何消息，例如＆＃34;文件大小很大＆＃34;或者其他的东西。它应该自动压缩小于1MB，它应该上传该图像。有没有可能做到这一点使用angularjs？这在angularjs中是否可行？

Answer 1

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

我有一个 Vue 前端使用 vue2dropzone 收集用户上传的文件。这些被发送到节点/Express 后端。我需要压缩文件并将其上传到 S3 实例而不存储在磁盘上。这意味着使用多路内存存储。因此，将无法使用 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 选项更改进程以更改文件的位置，甚至将其写入磁盘。

Answer 2

是的，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 个答案: