Question

我想将文件从离子应用程序上传到服务器。我正在使用cordovafiletransfer插件。使用它我可以通过在控制器代码中提供静态路径来上传文件。我的问题是如何按用户获取选定的文件路径？我只从所选文件的相对路径上的输入标签获取文件名。怎么做到的？

查看页码：

<label class="item item-input">
    <div class="input-label">Upload Photo</div>
    <input type="file" onchange="angular.element(this).scope().setFile(this)" accept="image/*"/>
</label>
<div class="padding">
    <button ng-click="upload()" class="button button-block button-assertive">Upload</button>
</div>

控制器代码：

$scope.upload = function() {
    var filename, options, targetPath;
    console.log($scope.theFile);
    targetPath = cordova.file.externalRootDirectory + '/Download/androidify.png';
    filename = targetPath.split('/').pop();
    options = {};
    options.fileKey = 'image_file';
    options.fileName = $scope.theFile.name;
    options.chunkedMode = false;
    options.mimeType = $scope.theFile.type;
    options.headers = {
        'Authorization': getDeviceToken()
    };
    console.log(options);
    return $cordovaFileTransfer.upload(domain.uploadphoto(), targetPath, options).then(
            (function(result) {
                console.log('SUCCESS: ' + JSON.stringify(result.response));
            }), 
            (function(err) {
                console.log('ERROR: ' + JSON.stringify(err));
            }), 
            function(progress) {}
    );
};

$scope.setFile = function(element) {
    return $scope.$apply(function($scope) {
        console.log(element);
        return $scope.theFile = element.files[0];
    });
};

如何获取所选文件的正确目标路径？

Answer 1

我遇到this post这应该解决问题，（它对我有用，经过一些修改）：

在我的模板中：

<input type="file" fileread="file.path" />
<button type="button" class="button button-small button-assertive" ng-click="vm.upload(file)">Upload PDF</button>

和我修改后的指令：

.directive("fileread", ['$cordovaFile', function ($cordovaFile) {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    var fileName = changeEvent.target.files[0].name;
                    $cordovaFile.writeFile(cordova.file.dataDirectory, fileName, loadEvent.target.result, true)
                        .then(function (result) {
                            console.log(result)
                        }, function (err) {
                            console.warn(err)
                        });
                    scope.$apply(function () {
                        scope.fileread = cordova.file.dataDirectory + fileName;
                    });
                }
                reader.readAsArrayBuffer(changeEvent.target.files[0]);
            });
        }
    }
}]);

记得在上传文件后清理

使用：

$cordovaFile.removeFile(cordova.file.dataDirectory, fileName)
  .then(function (success) {
    // success
  }, function (error) {
    // error
  });

有关FileReader

的详情，请参阅http://www.javascripture.com/FileReader

ngcordova android文件选择并上传到服务器

1 个答案:

记得在上传文件后清理