如何在angularjs中使用ng-file上传裁剪和上传图像

Posted 2023-02-25

【中文标题】如何在angularjs中使用ng-file上传裁剪和上传图像

【英文标题】：How to crop and upload a image using ng-file upload in angularjs

【发布时间】：2015-12-01 14:04:24

【问题描述】：

您好，我正在尝试裁剪图像并使用 angularjs 中的 ng-file 上传来上传图像。

裁剪后我正在获取画布数据。然后如何将该数据转换为文件并使用 ng 文件上传上传到服务器。

提前致谢。

【问题讨论】：

您也可以在自述文件（github.com/danialfarid/ng-file-upload）页面上按照此示例进行图片裁剪和上传：jsfiddle.net/xxo3sk41/1

【参考方案1】：

尝试发现这个例子。我想这对你有帮助。

$scope.upload = function (dataUrl) 
    Upload.upload(
        url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
        data: 
            file: Upload.dataUrltoBlob(dataUrl)
        ,
    ).then(function (response) 
        $timeout(function () 
            $scope.result = response.data;
        );
    , function (response) 
        if (response.status > 0) $scope.errorMsg = response.status 
            + ': ' + response.data;
    , function (evt) 
        $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
    );

full jsfiddle

【讨论】：

，您好，我在 Upload.Upload.dataUrltoBlob(dataUrl) 中遇到错误，提前致谢

@JohnRay 您是否将所有库连接到 jsfiddle 中提供的文件（“外部资源选项卡”）？

@JohnRay 请检查一下，我的回答是正确的。谢谢！

ok.. 我正在尝试将其发布到 nodejs。关于如何在nodejs中阅读它的任何理想。？？ router.post('/user/uploads', multipartMiddleware, function(req, resp) var newPath = "/Users/testUser/test_hold_files/" + req.files.file.originalFilename; fs.writeFile(newPath, req.files .file, function(err) if (err) console.log("Data Error"); return console.error(err); ); res.status(200).jsonp(status: "status:成功 - /Users/testUser/test_hold_files "); ); ===> 这只是将文件名写入文件夹，但它是空的。

嗨..您的代码是工作文件..但我想将文件存储在我的本地系统中。