正文 

当前位置： 首页 > 问答 >

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

     2023-02-25     288

关键词：

【中文标题】如何在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 "); ); ===> 这只是将文件名写入文件夹，但它是空的。 嗨..您的代码是工作文件..但我想将文件存储在我的本地系统中。

node.js（express）中使用jcrop进行图片裁切上传

需求说明简单来说就是要实现用户上传头像，并且要保存用户裁切后的部分作为用户头像。第一步，选择图片：第二步，在弹窗页面中展现并进行裁切：第三步，点击“保存”，上传服务器。实现过程说来有点坎坷，相当于做了... 查看详情

如何在angularjs e2e量角器测试中上传文件

】如何在angularjse2e量角器测试中上传文件【英文标题】：Howtouploadfileinangularjse2eprotractortesting【发布时间】：2014-02-1319:57:08【问题描述】：我想使用angularjse2e测试来测试文件上传。您如何在e2e测试中做到这一点？我通过gruntkarma运... 查看详情

如何在 Summernote 编辑器（AngularJs 版本）中上传图片？

】如何在Summernote编辑器（AngularJs版本）中上传图片？【英文标题】：HowtouploadimageinSummernoteEditor(AngularJsversion)?【发布时间】：2016-06-0704:54:05【问题描述】：谁能告诉我如何在summernote编辑器（angularJsv.）中上传图片？我的代码：$sc... 查看详情

如何在 e2e AngularJS 测试中进行文件上传？

】如何在e2eAngularJS测试中进行文件上传？【英文标题】：Howtodofileuploadine2eAngularJStests?【发布时间】：2012-10-3014:16:17【问题描述】：在我的一个观点中，我有一个文件上传控件。它支持通过拖放或单击按钮后打开的标准文件对话... 查看详情

在 MVC .net 核心中使用 Angularjs 上传文件和数据

】在MVC.net核心中使用Angularjs上传文件和数据【英文标题】：UploadFileandDatawithAngularjsinMVC.netcore【发布时间】：2021-09-1914:01:31【问题描述】：<inputtype="file"ng-model="ch.FileName"id="file"name="myFile"nchange="angular.element(this).scope().saveC 查看详情

如何在angularjs中上传已经在<img src>中的图像

】如何在angularjs中上传已经在<imgsrc>中的图像【英文标题】：Howtouploadimagewhichisalreadyin<imgsrc>inangularjs【发布时间】：2016-02-2613:21:37【问题描述】：我有一个显示在&lt;imgng-src=\'\'&gt;中的现有图像，我想在单击提交按... 查看详情

如何使用 AngularJS 将文件上传到 Google Drive

】如何使用AngularJS将文件上传到GoogleDrive【英文标题】：HowtouploadfiletoGoogleDrivewithAngularJS【发布时间】：2015-12-1110:07:12【问题描述】：我卡住了，我无法使用AngularJS将文件上传到GoogleDrive。现在我的客户想知道他们想使用AngularJS将... 查看详情

如何在 AngularJS 中使用 HTTPS？

】如何在AngularJS中使用HTTPS？【英文标题】：HowcanIuseHTTPSinAngularJS?【发布时间】：2013-09-2106:46:20【问题描述】：我正在使用AngularJS、$resource和$http并使用apis，但是由于安全原因，我需要发出HTTPS请求（在HTTPS协议下工作）。在Angula... 查看详情

如何在 AngularJS 中使用 jQuery 日期选择器

】如何在AngularJS中使用jQuery日期选择器【英文标题】：HowtousejQuerydatepickerinAngularJS【发布时间】：2019-11-2811:40:48【问题描述】：如何检查WebAPI是否应从后端提供数据以供angularjs中的选择选项使用？如何在angularjs中使用这个函数？$... 查看详情

angularjs上传图片

上传图片需要引入插件ngFileUpload，使用bower安装方法：bowerinstall ng-file-upload--save,安装后需要在命名app的名字js文件中注入，如下所示：(function(){angular.module(‘app‘,[‘ionic‘,‘ngStorage‘,‘ngFileUpload‘]);})();在相应的html中引入... 查看详情

如何在骨干和angularjs中使用reactJS组件

】如何在骨干和angularjs中使用reactJS组件【英文标题】：howtousereactJScomponentinsidebackboneandangularjs【发布时间】：2016-08-0320:23:23【问题描述】：我有骨干应用程序和angularJS应用程序，同时，我正在使用reactJS创建组件库。现在的目标... 查看详情

如何使用 angularjs 在 RESTful 请求中执行授权？

】如何使用angularjs在RESTful请求中执行授权？【英文标题】：HowtoperformauthorizationinRESTfulrequestswithangularjs?【发布时间】：2013-09-0702:48:43【问题描述】：我正在使用angularjs向需要授权的API发出REST请求。授权要求对请求进行签名（类... 查看详情

AngularJS：如何使用多部分表单实现简单的文件上传？

】AngularJS：如何使用多部分表单实现简单的文件上传？【英文标题】：AngularJS:howtoimplementasimplefileuploadwithmultipartform?【发布时间】：2012-12-0710:23:40【问题描述】：我想从AngularJS到node.js服务器做一个简单的多部分表单发布，表单的... 查看详情

如何在 AngularJS 中使用图像作为背景？

】如何在AngularJS中使用图像作为背景？【英文标题】：HowtouseanimageasbackgroundinAngularJS?【发布时间】：2019-04-1021:49:55【问题描述】：这是问题：三天以来这件事让我发疯......我想使用angularJS变量作为背景图像而不使用指令。我的目... 查看详情

如何在 AngularJS 中使用公钥解码 JWT？

】如何在AngularJS中使用公钥解码JWT？【英文标题】：HowcanidecodeinAngularJSaJWTwithapublickey?【发布时间】：2015-07-0206:23:36【问题描述】：我正在使用基于JWT的身份验证构建一个AngularJS站点。当我成功登录到应用程序时，后端会返回一... 查看详情

使用 AngularJS 和 SpringMVC 进行多部分文件上传

】使用AngularJS和SpringMVC进行多部分文件上传【英文标题】：MultipartFileUploadusingAngularJSandSpringMVC【发布时间】：2017-07-2900:45:09【问题描述】：我是angularJS的新手，并尝试使用angularJS和SpringMVC上传文件，但无法获得所需的解决方案并... 查看详情

AngularJS：使用 $resource 上传文件（解决方案）

】AngularJS：使用$resource上传文件（解决方案）【英文标题】：AngularJS:Uploadfilesusing$resource(solution)【发布时间】：2014-02-0215:27:20【问题描述】：我正在使用AngularJS与RESTful网络服务进行交互，使用$resource来抽象暴露的各种实体。其... 查看详情

如何在 AngularJS 中使用 jQuery

】如何在AngularJS中使用jQuery【英文标题】：HowtousejQueryinAngularJS【发布时间】：2014-05-0504:01:22【问题描述】：我正在尝试使用简单的jQueryUI。我已经包含了所有内容，并且有这个简单的脚本：<script>$(function()$("#slider").slider(););&... 查看详情