Angularjs上传图片

时间:2017-05-04 19:39:18

标签: angularjs node.js express mean-stack multer

我尝试使用angularjs创建上传功能。我在互联网上观看并阅读了一些教程。不幸的是,所有教程对我来说都太复杂了,因为我在这个领域还是新手。



<form ng-submit="upload(currentUser())">
    <div class="row">
        <div class="form-group">
            <div class="col-xs-2">
                <label>Car</label>
            </div>
            <div class="col-xs-5">
                <input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-xs-2">
                <label>Price(RM) per day</label>
            </div>
            <div class="col-xs-5">
                <input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-xs-2">
                <label>Business Area</label>
            </div>
            <div class="col-xs-5">
                <input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-xs-2">
                <label>Insert Car Image</label>
                <br>
            </div>
            <div class="col-xs-5">
                <!--<button type="button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-picture"></span> Image
                </button>-->
                    <input type="file"/>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-xs-2">
            </div>
            <div class="col-xs-5">
                <button type="submit" class="btn btn-primary btn-sm pull-right">
                    <span class="glyphicon glyphicon-globe"></span> Publish
                </button>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
    <br>
    <br>
</form>
&#13;
&#13;
&#13;

&#13;
&#13;
app.controller('postadCtrl', [
    '$scope',
    'auth',
    function($scope, auth) {

    	$scope.currentUser = auth.currentUser;

        $scope.posts = [];

        $scope.upload = function(user) {
            $scope.posts.push({
            	company_name: user,
                car_type: $scope.newCar,
                seaters: 5,
                price: $scope.newPrice,
                contact: 038880000,
                location: $scope.businessArea
            });
        };
    }
]);
&#13;
&#13;
&#13;

那么我该如何以最简单的形式和解释来做到这一点?我的路由器和模块将如何? 输出应该如下所示。 enter image description here

0 个答案:

没有答案