使用 angularjs 上传图片答案

【问题标题】：upload an image using angularjs使用 angularjs 上传图片
【发布时间】：2019-05-19 18:14:01
【问题描述】：

            <label class="item item-input item-stacked-label" ng-class="{ 'has-error-lr' : userForm.firstName.$invalid, 'valid-lr' : userForm.firstName.$valid}">
                <span class="input-label">First name</span>
                <input type="text" name="firstName" ng-model="user.firstName" placeholder="Type first name" ng-pattern="/^[a-zA-Z\.'\s]*$/" required>

                <div class="form-error wrap-text" ng-show="userForm.firstName.$error && userForm.firstName.$invalid && userForm.$submitted">

                    Please enter valid a name, special characters or numbers are not allowed.
                </div>
            </label>

            <label class="item item-input item-stacked-label" ng-class="{ 'has-error-lr' : userForm.lastName.$invalid, 'valid-lr' : userForm.lastName.$valid}">
                <span class="input-label">Last name</span>
                <input type="text" name="lastName" ng-model="user.lastName" placeholder="Type last name" ng-pattern="/^[a-zA-Z\.'\s]*$/">
                <div class="form-error wrap-text" ng-show="userForm.lastName.$error && userForm.lastName.$invalid && userForm.$submitted">
                    Please enter valid a name, special characters or numbers are not allowed.
                </div>
            </label>

            <label class="item item-input item-stacked-label" ng-class="{ 'has-error-lr' : userForm.userEmail.$invalid, 'valid-lr' : userForm.userEmail.$valid}" ng-if="!isEditing">
                <span class="input-label">Email</span>
                <input type="email" name ="userEmail" ng-disabled="isEditing" ng-model="user.userEmail" placeholder="Type email">
                <div class="form-errors"  ng-messages="userForm.userEmail.$error" ng-if="userForm.userEmail.$invalid && userForm.$submitted" ng-messages-include="templates/form-errors.html"> </div>
            </label>

            <label class="item item-input item-stacked-label" ng-class="{ 'has-error-lr' : userForm.contact.$invalid , 'valid-lr' : userForm.contact.$valid}">
                <span class="input-label">Contact no</span>
                <input type="tel" name="contact" ng-model="user.contact" placeholder="Type contact number" pattern="^\d{10}$" maxlength="10" required>
                <div class="form-errors"  ng-messages="userForm.contact.$error" ng-if="userForm.contact.$invalid && userForm.$submitted" ng-messages-include="templates/form-errors.html"> </div>
            </label>

            <label class="item item-select item-input" ng-if="!isEditingSelfAccount" ng-class="{ 'has-error-lr' : userForm.role.$invalid , 'valid-lr' : userForm.role.$valid}">
                <span class="input-label">Select role</span>
                <div data-tap-disabled="true">
                    <select ng-model="user.role" ng-change="setClassesArrayToUserObject()" name="role" required>
                        <option value="admin" ng-if="userRoleType.isAdmin">Admin</option>
                        <option value="teacher" ng-if="userRoleType.isAdmin">Teacher</option>
                        <option value="student" ng-if="userRoleType.isAdmin || userRoleType.isTeacher">Student</option>
                    </select>
                </div>
                <div class="form-errors"  ng-messages="userForm.role.$error" ng-if="userForm.role.$invalid && userForm.$submitted" ng-messages-include="templates/form-errors.html"> </div>
            </label>

页面是使用 angularjs 和 ionic 创建的。我是角度和离子的新手。需要在名字之前或旁边上传图片。这个离子图标可以用“”来上传图片。使用了 ng-upload，但无法正确理解。

怎么做？

【问题讨论】：

你可以使用图片选择器来挑选图片，然后通过转换base64字符串上传

标签： javascript angularjs image-uploading

【解决方案1】：

您是否安装了 Angular 文件上传？以下是使用 Angular 文件上传的步骤：在我们的代码中使用它之前，我们需要安装 Angular File Upload。

打开命令提示符
转到您的项目根目录
运行命令npm install angular-file-upload 安装 angular-file-upload 后，我们需要将它作为依赖添加到我们的 Angular 模块中。
注入依赖运行以下命令：

var app = angular.module('my-app', [ '角文件上传' ]);

现在您可以在代码中的任何地方使用它。

例如：在 HTML 中：

<input type="file" nv-file-select uploader="uploader"/><br/>

在角模块中：

.module('app', ['angularFileUpload'])
.controller('AppController', function($scope, FileUploader) {
    $scope.uploader = new FileUploader();
});

您可以在 link 上找到简单的示例。希望对你有帮助。

【讨论】：