AngularJS文件上传Firebase Blob错误

时间:2017-10-16 15:44:37

标签: javascript angularjs angularfire ng-file-upload

早上好,伙计们。

我的问题如下: 我正在实施患者登记,当患者陈述图像时,系统允许他/她上传他们自己的照片;图像显示自己,最后,当他们放置所有信息时,表单应该将信息存储在Firebase存储中,但是当它发生时,浏览器会抛出此错误(我正在使用ng-file-upload为此)

  

t {t:“storage / invalid-argument”,e:“Firebase存储:put中索引0处的参数无效:预期字符串。”,n:null,r:“FirebaseError”}

这是我的代码:

<div class="login-overlay" ng-controller="LoginCtrl">
    <div class="logo">
        Nourish<br> <span class="smaller">Intelligent Nutrition</span>
    </div>
    <div class="form-container shadow">
        <div class="icon">
            <div class="header">Registro Paciente</div><br>
            <label for="image">
                <input id="image" type="file" ngf-select="selectFile($files)" name="file" ngf-accept="'image/*'" style="display:none;"/>
                <img ng-src="{{ fileList.name }}" class="userPhoto" err-src="{{ defaultAvatar }}" ng-hide="fileLoad"/>
                <div ng-repeat="file in fileList">
                    <img ngf-src="file" class="userPhoto" err-src="{{ defaultAvatar }}">
            </label>
        </div>
        <div class="inputs" layout-padding>
            <form name="registerForm">
                <div layout="row">
                    <md-input-container class="md-icon-float" flex="50">
                        <label>Nombre(s)</label>
                        <md-icon md-svg-src="app/images/reg/user.svg"></md-icon>
                        <input type="text" name="firstName" ng-model="user.firstName" ng-pattern="/^[a-zA-Z ]*$/">
                        <div ng-show="loginForm.firstName.$dirty && loginForm.firstName.$invalid" ng-messages="loginForm.firstName.$error">
                            <div ng-message="required">This is required.</div>
                            <div ng-message="pattern">Input must only contain letters</div>
                        </div>
                    </md-input-container>
                    <md-input-container flex="50">
                        <label>Apellidos</label>
                        <input type="text" name="lastName" ng-model="user.lastName" ng-pattern="/^[a-zA-Z ]*$/">
                        <div ng-show="loginForm.lastName.$dirty && loginForm.lastName.$invalid" ng-messages="loginForm.lastName.$error">
                            <div ng-message="required">This is required.</div>
                            <div ng-message="pattern">Input must only contain letters</div>
                        </div>
                    </md-input-container>
                </div>
                <div layout="row">
                    <md-input-container flex="40">
                        <label>Fecha de Nacimiento</label>
                        <md-datepicker ng-model="myDate" md-placeholder="Fecha..."></md-datepicker> 
                    </md-input-container>
                    <md-input-container md-no-float flex="60">
                        <input type="text" name="age" aria-label="calculateAgewMonths(myDate)" ng-value="calculateAgewMonths(myDate)" disabled>
                    </md-input-container>
                </div>
                <div layout="row">
                    <md-input-container flex="40" class="md-icon-float md-block">
                        <label>Género</label>
                        <md-icon md-svg-src="app/images/reg/gender.svg"></md-icon>
                        <md-select name="gender" ng-model="user.gender">
                            <md-option value="femenino">Femenino</md-option>
                            <md-option value="masculino">Masculino</md-option>
                        </md-select>
                    </md-input-container>
                    <md-input-container flex="60" class="md-icon-float md-block">
                        <label>Ocupación</label>
                        <md-icon md-svg-src="app/images/reg/occupation.svg"></md-icon>
                        <input type="text" name="occupation" ng-model="user.occupation">
                    </md-input-container>
                </div>
                <md-input-container class="md-icon-float md-block">
                    <label>Teléfono</label>
                    <md-icon md-svg-src="app/images/reg/phone.svg"></md-icon>
                    <input type="tel" md-maxlength="10" name="phone" ng-model="user.phone" ng-pattern="/^[0-9]*$/" >
                    <div ng-messages="loginForm.phone.$error">
                        <div ng-message="required">This is required.</div>
                        <div ng-message="pattern">Sólo puedes introducir números.</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-icon-float md-block">
                    <label>Correo Electrónico</label>
                    <md-icon md-svg-src="app/images/email.svg"></md-icon>
                    <input type="email" name="email" ng-model="user.email" required>
                    <div ng-messages="loginForm.email.$error">
                        <div ng-message="required">This is required.</div>
                        <div ng-message="email">Introduce un correo electrónico válido</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-icon-float md-block">
                    <label>Contraseña</label>
                    <md-icon md-svg-src="app/images/pass.svg"></md-icon>
                    <input ng-minlength="4" md-maxlength="10" type="password" name="password" ng-model="user.password" required>
                    <div ng-messages="loginForm.password.$error">
                        <div ng-message="required">This is required.</div>
                        <div ng-message="minlength">La contraseña debe tener más de tres caracteres.</div>
                    </div>
                </md-input-container>
                <md-button class="md-raised md-primary" ng-disabled="!registerForm.$valid" ng-click="register(file)">&nbsp Registrar &nbsp</mdbutton>
                </div>
            </form>
        </div>
    </div>
</div>

控制器

app.controller('LoginCtrl',['$scope', '$firebaseAuth', '$firebaseStorage', 
function($scope, $firebaseAuth, $firebaseStorage) {

// Initializate Firebase Authentication
var auth = $firebaseAuth();

// Default Image for user avatar        
$scope.defaultAvatar = 'app/images/account-circle.svg';
$scope.fileLoad = null;

// Define variable to store date
$scope.myDate = new Date();

// Function to calculate Age & months
$scope.calculateAgewMonths = function calculateAgewMonths(bd) {
    // Calculate Years
    var ageDifMs = Date.now() - bd.getTime();
    var ageDate  = new Date(ageDifMs);
    var age = Math.abs(ageDate.getUTCFullYear() - 1970);

    // Calculate Months
    var months = new Date().getMonth() - $scope.myDate.getMonth();

    return "Edad: " + age + " años con " + months + " meses.";
};

// Function to calculate Age in years
$scope.calculateAge = function calculateAge(bd) {
    var ageDifMs = Date.now() - bd.getTime();
    var ageDate  = new Date(ageDifMs);
    var age = Math.abs(ageDate.getUTCFullYear() - 1970);

    return age;
}

$scope.selectFile = function(file) {
    $scope.fileList = file;
    console.log($scope.fileList);
    $scope.fileLoad = true;
};

$scope.login = function() {
    auth.$signInWithEmailAndPassword(this.user.email, this.user.password)
        .then(function(firebaseUser) {
            console.log("Signed in as: ", firebaseUser.uid);
        }).catch(function(error) {
            console.error("Authentication failed:", error);
        });
};

$scope.register = function(file) {
    auth.$createUserWithEmailAndPassword(this.user.email, this.user.password)
        .then(function(firebaseUser) {
            userID = firebaseUser.uid;

            // Reference for Storage
            var strRef = firebase.storage().ref('profilePhotos/' + userID);
            var storage = $firebaseStorage(strRef);

            var uploadTask = storage.$putString(file);

            // Reference for Database
            var db = firebase.database();
            var patientRef = db.ref('patients').child(userID);

            patientRef.set({
                firstName : $scope.user.firstName,
                lastName  : $scope.user.lastName,
                birthday  : $scope.myDate,
                age       : $scope.calculateAge($scope.myDate),
                gender    : $scope.user.gender,
                email     : $scope.user.email,
                occupation: $scope.user.occupation,
                phone     : $scope.user.phone
            })
        }).catch(function(error) {
            console.log("Error:", error);
        });
};

希望你能帮助我弄清楚我做错了什么。提前谢谢,大家!祝你有美好的一天!

0 个答案:

没有答案