Ionic-Angular.js 拍照并发送到服务器:空图像

2024-05-17

因此,我设法使用自定义指令通过 Angular.js 将图像上传到我的服务器。 我还成功地实现了 Cordova 的相机功能。 现在我尝试连接两者,但是当将图像发送到服务器时,它们被存储为空。我认为问题在于我使用输入字段来获取图像,并且它获取了完整的对象,而现在我在拍照并发送后只获取了图像路径。我的问题是,我真的不明白如何将路径转换为对象,如果这就是问题所在?

索引.html

<form class="form-horizontal" role="form">
    <button class="picButton" ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
    <img ng-src="{{lastPhoto}}" style="max-width: 100%">
...
</form>

控制器.js

$scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
        console.log(imageURI);
        $scope.lastPhoto = imageURI;
        $scope.upload(); <-- call to upload the pic
    },
    function(err) {
        console.err(err);
    }, {
        quality: 75,
        targetWidth: 320,
        targetHeight: 320,
        saveToPhotoAlbum: false
    });
};

$scope.upload = function() {
    var url = '';
    var fd = new FormData();

    //previously I had this
    //angular.forEach($scope.files, function(file){
        //fd.append('image',file)
    //});

    fd.append('image', $scope.lastPhoto);

    $http.post(url, fd, {

        transformRequest:angular.identity,
        headers:{'Content-Type':undefined
        }
    })
    .success(function(data, status, headers){
        $scope.imageURL = data.resource_uri; //set it to the response we get
    })
    .error(function(data, status, headers){

    })
}

打印 $scope.lastPhoto 时我得到图像路径:文件:///var/mobile/Applications/../tmp/filename.jpg

EDIT

请求标头:

------WebKitFormBoundaryEzXidt71U741Mc45
Content-Disposition: form-data; name="image"

file:///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
------WebKitFormBoundaryEzXidt71U741Mc45--

这应该引起问题吗?因为我可以看到我发送的是路径,但不是图像本身。

在更改之前,我使用自定义指令,并使用 $scope.files 附加到上传函数中的请求:

<input type="file" file-input="files" multiple  onchange="angular.element(this).scope().filesChanged(this);upload();">
<button ng-click="upload()">Upload</button>

我用这段代码解决:

$scope.getPhoto = function() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 75, targetWidth: 320,
    targetHeight: 320, destinationType: 0 }); 
    //destination type was a base64 encoding
    function onSuccess(imageData) {
        //preview image on img tag
        $('#image-preview').attr('src', "data:image/jpeg;base64,"+imageData);
        //setting scope.lastPhoto 
        $scope.lastPhoto = dataURItoBlob("data:image/jpeg;base64,"+imageData);
    }
    function onFail(message) {
        alert('Failed because: ' + message);
    }
} 
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
 var byteString = atob(dataURI.split(',')[1]);
 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

 var ab = new ArrayBuffer(byteString.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < byteString.length; i++)
 {
    ia[i] = byteString.charCodeAt(i);
 }

 var bb = new Blob([ab], { "type": mimeString });
 return bb;
}

在此之后使用附加到您的表单数据,如下所示:

formData.append('photo', $scope.lastPhoto, $scope.publish.name+'.jpg')

这段代码在IOS上运行没有问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic-Angular.js 拍照并发送到服务器:空图像 的相关文章

  • 如何使用socket.io发送图像文件(二进制数据)?

    我无法从以下位置发送数据Android Client to NodeJS Server I use Socket IO 客户端 https github com socketio socket io client java我的客户端中的ja
  • Firebase 未定义?

    我正在开发一个 Angular 项目并使用 Firebase 但出现错误ReferenceError Firebase is not defined 但我不明白为什么 这是我的index html
  • 该页面是通过 HTTPS 加载的,但请求了不安全的 XMLHttpRequest 端点

    我正在调用一个rest APIHttps已部署的应用程序 到Http休息 API 我使用 Angular Js 框架用 JavaScript 编写了逻辑 Web 服务调用失败并显示以下消息 https someurl 处的页面是通过 HTT
  • Cordova SQLite 保存 BLOB

    我的 Cordova SQLite 插件有问题 如何将 BLOB 图像保存到 SQLite 我在 JS 中有 BLOB 对象 Blob size 96874 type image jpeg proto Blob length 1 我试图拯救
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • Angularfire 和 FirebaseListObservable 没有使用 ionic 2 应用程序导出成员 angularfire2

    当我创建 Ionic 2 应用程序时 FirebaseListObservable 和 Angularfire 没有导出成员 angularfire2 将两个文件导入 home ts 我的 Cordova 和 ionic 版本是 科尔多瓦版
  • 在 AngularJS 中动态显示图像

    我正在使用http请求从数据库获取图像的路径 并且图像位于服务器中 我想在 img src 中显示该图像 这是代码 http url user profile exec php method GET params uid user id s
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • 根据用户是否经过身份验证隐藏或显示链接 - AngularJs

    我目前正在研究一个AngularJS应用程序中 我遇到了以下障碍 我们有一个login当用户提交页面时 我们调用 Web api 并对用户进行身份验证 我们目前正在使用声明身份验证来设置 cookie 等 这些内容按预期工作 但是我遇到的问
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 将视频上传/保存到数据库或文件系统

    我以前从未尝试过保存视频 所以我对此了解不多 我知道如果视频很小 我可以转换为字节数组并保存到数据库 但是为了提高效率 我想了解如何将任何上传的视频保存到我的服务器文件中 然后只保存该文件的文件路径我的数据库表中的视频 我完全不知道如何开始
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 如何保存 1 个 xcode 项目中的所有构建设置并在其他 xcode 项目上使用它们?

    我使用 xcode 4 5 和 cordova phonegap 来构建我的应用程序 我投入了大量时间来获取适合我的 Xcode 项目的构建设置 并且我想在我正在构建的多个应用程序上重用这些设置 我正在寻找是否有一种快速的方法来导出这些设置
  • cordova-plugin-whitelist 适用于 Android,但不适用于 iOS (Phonegap Build)

    我正在开发一个用 Cordova 封装并使用 Phonegap Build 构建的 JavaScript 应用程序 我们包括cordova plugin whitelist来自我们构建中的 npm 并添加了
  • 监听指令中的表单提交事件

    我想监听指令中提交的表单 假设我有这样的指令 app directive myDirective function return restrict A require form scope smth link function scope
  • Angular 完成渲染后运行 jQuery

    我正在尝试使用 angularjs 中的 json 对象填充个人资料页面 我正在为此使用指令 我有一个配置文件指令 其中包含配置文件部分指令作为子项 配置文件部分具有作为子级的配置文件子部分指令 我需要在 Angular 开始编译之前和 A
  • Flask send_from_directory

    我有一个 Flask Web 应用程序 允许用户上传文件 然后下载或在浏览器中显示它们 我应该使用send from directory在生产时从我的服务器上的上传文件夹提供这些文件 你最好让 nginx 为你的静态文件提供服务 众所周知
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • ChangeState 之后重置/卸载控制器(调用注销)。 AngularJS

    我正在创建一个应用程序 用户可以从 Facebook 或 Twitter 登录 登录后 用户将被定向到某个主页 在这里 控制器加载并调用我的初始函数 该函数加载特定于该用户的数据 当用户单击 注销 时 令牌将被清除 用户将被定向到登录页面
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮

随机推荐

  • 如何在ionic 2中创建覆盖页面?

    当我进入新页面时如何创建透明的引导覆盖页面 我如何在 ionic 2 中实现 您可以在外部创建 div
  • php 中的简单授权/登录功能

    我希望第一次实现用户登录到我的网站 我很高兴构建自己的解决方案 或者实现一些开源的东西 但是到目前为止 在我的搜索中没有任何包是明显的选择 同样 我完全意识到 作为一名中级 php 程序员 如果我推出自己的解决方案 并真正敞开大门 我很可能
  • mvc core 2.0,如何通过配置使用appSettings.json文件

    今天 我正在尝试新的 asp net core 2 0 但使用 JSON 配置文件时遇到了一些麻烦 我没有在 IConfiguration 配置构造函数属性中注入该文件 在 asp net core 1 1 中 我将在 StartUp 中使
  • .profile 无法从 Mac 终端运行

    我有一个 profile 文件 我正在终端中读取并使用别名 但在某些时候 别名由于没有明确的原因而停止工作 其他命令仍在工作 为了快速修复 我删除了 rm 并在用户目录中重新创建了 profile 文件 我可以看到 至少在该目录中没有 ba
  • 将字符串连接到python列表中所有元素的末尾

    我想知道如何将字符串连接到列表中所有元素的末尾 例如 List1 1 2 3 string a output 1a 2a 3a 在列表理解和使用中重建列表str format在两个参数上 gt gt gt string a gt gt gt
  • apache htaccess 将第一个段映射为参数而不干扰其他参数

    这可能是一个经典的 htaccess 问题 但我仍然找不到适合我的具体情况的问题 这是closest https stackoverflow com questions 9299793 apache httaccess rewriting我
  • 如何将对象数组传递给jade模板?

    我想将一组对象从 mongodb 传递到客户端 这是物体 var objeto img name name of the file image image jpg url title title of the image caption d
  • 如何右对齐 UILabel?

    Remark 实施 myLabel textAlignment right does not解决了我的问题 这不是我所要求的 我想要实现的是让标签对齐右对齐 为了更清楚地说明 这就是如何left对齐外观 就是这样justify对齐外观 if
  • Clang:使用取决于模板上下文的 constexpr 模板变量对二进制表达式(“const auto”和“int”)无效操作数

    Clang error invalid operands to binary expression const auto and int 语境 铿锵12 0 0 简单的问题 此错误在此上下文中意味着什么 例如 该消息与此处相关吗 为什么这个
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • 如何转储 neo4j 图形数据库?

    我将所有数据库存储在一个位置C JATIN DATA 数据库 neo4jDatabases 如何使用 neo4j Desktop 单独转储所有数据库 我已经尝试过 neo4j admin dump database to 这个命令但出现错误
  • 有 JavaScript 的微积分库吗? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有人知道 JavaScript 的微积分库吗 我做了一些谷歌搜索 但没有想出任何东西 我申请了 Wolf
  • 使用 LINQ 对类列表进行排序

    我有一个List
  • 将自定义图像设置为 UIBarButtonItem 但它不显示任何图像

    我想将自定义图像设置为 UIBarButtonItem 但它只显示周围的矩形框并且不显示实际图像 func setupBrowserToolbar let browser UIToolbar frame CGRect x 0 y 20 wi
  • Qt:在多个布局中使用一个小部件

    我有一个 QTabBar 所有选项卡都应该有相同的小部件 layout1 gt addWidget w layout2 gt addWidget w 然而打电话addWidget第二次导致该小部件在第一个布局中消失 有没有办法使用一个小部件
  • 如何允许 Kubernetes 作业访问主机上的文件

    我已经彻底阅读了 Kubernetes 文档 但在与主机文件系统上的文件与 K8 作业启动的 pod 内运行的应用程序进行交互时仍然遇到问题 即使是最简单的实用程序也会发生这种情况 因此我提供了 yaml 配置的精简示例 此处引用的本地文件
  • iOS UITableViewCell cell.imageView 设置圆角

    嘿我正在尝试设置cell imageView s cornerRadius 但似乎不起作用 cell imageView layer cornerRadius 9 它会起作用还是我应该添加自定义UIImageView在我的牢房里有圆角吗 我
  • 如何在 Spring Data 中选择不同的结果

    我在使用简单的 Spring Data 查询或 Query 或 QueryDSL 在 Spring Data 中构建查询时遇到问题 如何选择三列 研究 国家 登录 不同的行 并且查询结果将是用户对象类型的列表 Table User Id S
  • React App 中的图像损坏

    我正在尝试访问 React 应用程序中的图像 当我运行代码时 我在网页上看到一个损坏的图像图标 我不确定我是否正在访问图像的正确路径 我的代码如下 import React Component from react class Header
  • Ionic-Angular.js 拍照并发送到服务器:空图像

    因此 我设法使用自定义指令通过 Angular js 将图像上传到我的服务器 我还成功地实现了 Cordova 的相机功能 现在我尝试连接两者 但是当将图像发送到服务器时 它们被存储为空 我认为问题在于我使用输入字段来获取图像 并且它获取了