Question

我的问题如下。

我已经提供了WEB API，我必须添加电路板图片。

我需要做什么？

用户应该可以选择手机中的图像
用户可以添加主板名称
当用户点击提交时，输入的电路板名称和电路板图像应使用Web API和PUT方法发布。以下是WEB API详细信息

WEB API详细信息

标题

网址：https://example.com
内容类型：|内容类型|
方法：PUT

数据

board_id：321
board_title：|标题|
board_background：|档案|

我已经使用 cordovaImagePicker 插件来选择图片，然后我无法将其上传到服务器。

我可以使用cordova文件传输插件，但我认为在这种情况下无法帮助我，因为没有指定的地方来存储图像。所有文件管理都是由WEB API完成的，我们只需要发布带有数据的文件。

Answer 1

我可以建议一件简单的事情，

使用input [＆＃34; file＆＃34;]标签选择图像。您将获得文件对象和临时URL。使用此网址，您可以在表单中显示图像。

然后使用formData附加图像和其他字段。

e.g。

 var fd = new FormData();
 fd.append('board_background', $scope.image, $scope.image.name);
 fd.append('board_id', 321);
 fd.append('board_title', 'Dummy title');

 var xhr = new XMLHttpRequest();
 xhr.open('PUT', YOUR_URL, true);

 xhr.onload(function(res){
    // Write your callback here.
 });

 // Send the Data.
 xhr.send(fd);

希望它能帮助您并满足您的要求。

Answer 2

以下链接肯定会对您有所帮助：

http://ionicmobile.blogspot.in/2015/10/jquery-file-upload.html

如果需要，进行适当的更改。任何帮助都让我知道......

Answer 3

首先需要从设备中选择图像。

vm.getImages = function () {
            var options = {
                quality: 70,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit: true,
                correctOrientation:true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: true
            };

            navigator.camera.getPicture(onSuccess, onFail, options);

            function onSuccess(imageURI) {                
                vm.image = "data:image/jpeg;base64," + imageURI;
                vm.imageURI = imageURI;
            }

            function onFail(message) {                
                console.log('Failed because: ' + message);
            }
        };

如果需要，您可以更改输入的源类型。

sourceType: Camera.PictureSourceType.CAMERA,

成功后，您可以直接使用ImageURI或将其转换为base64，如下所述进行上传。

vm.image = "data:image/jpeg;base64," + imageURI;

在此之后，您可以使用FileTransfer plugin上传文件并同时跟踪进度。

cordovaFileTransfer.upload()
                .then(function (result) {},
                  function (err) {},
                  function (progress) {});

使用Web API在Ionic应用程序中上载文件

3 个答案: