加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

php – 图像未从angular上传到Laravel

发布时间:2020-12-14 19:42:35 所属栏目:大数据 来源:网络整理
导读:我创建了一个用于保存项目详细信息的表单.我正在使用laravel 5.1和angularJS.项目信息将成功保存,但图像未上传到服务器,图像细节也未保存在数据库中.我需要帮助将图像上传到laravel使用 angularjs 它是我的HTML代码: div ng-controller="itemController"for
我创建了一个用于保存项目详细信息的表单.我正在使用laravel 5.1和angularJS.项目信息将成功保存,但图像未上传到服务器,图像细节也未保存在数据库中.我需要帮助将图像上传到laravel使用 angularjs

它是我的HTML代码:

<div ng-controller="itemController">
<form ng-submit="addItem()">
    <label>Name:</label><input type="text" name="name" value="" ng-model="newitem.name" placeholder="Item Name">
    <label>Model No:</label><input type="text" name="model" value="" ng-model="newitem.model" placeholder="Model Number">
    <label>Size:</label><input type="text" name="size" value="" ng-model="newitem.size" placeholder="Item Size">
    <label>Colour:</label><input type="text" name="color" value="" ng-model="newitem.color" placeholder="Item Colour">
    <br>
    <label>Description:</label><textarea cols="30" rows="5" ng-model="newitem.description" placeholder="Description"></textarea>
    <br>
    <label>Photo:</label><input type="file"  accept="imag/works" ngf-select="" ngf-multiple="true"  class="form-control" id="img" name="img" placeholder="Image" ng-model="newitem.photo" multiple>
    <br>
    <button type="submit">Save</button>
</form>
<div ng-show="sendmessage">
    Item Saved Successfully...........
</div>

<div>

AngularJs代码:

app.controller('itemController',function($scope,$http,Item) {
$scope.items=[];
$scope.newitem={};
$scope.curitem = {};
$scope.sendmessage=false;

loadData();

//To Send Message to Site Admin..................

$scope.addItem=function(){
    if($scope.curitem.id){
        //TODO error display
        $scope.newitem.$update(function () {
            angular.extend($scope.curitem,$scope.curitem,$scope.newitem);
            $scope.sendmessage=true;
        });
    }else{
        $scope.newitem.$save(function (item) {
            //TODO error display
            $scope.items.push(item);
            $scope.sendmessage=true;
        });
    }
    //$scope.sendmessage=true;
    $scope.curitem = {};
    $scope.newitem = {};
    $scope.newitem=new Item();
    loadData();
};



function loadData(){
    var items =Item.query(function () {
        $scope.items = items;
        $scope.newitem=new Item();
    });
}
});


angular.module('ItemService',[]).factory('Item',['$resource',function($resource){
    return $resource('/api/items/:itemId',{
        itemId:'@id'
    },{
        update:{
            method:'PUT'
        }
    });
}
]);

ItemController.php如下:

<?php

        namespace AppHttpControllersAuth;

        use AppFile;
        use AppItem;
        use IlluminateHttpRequest as Request;
        use AppHttpRequests;
        use AppHttpControllersController;
        use IlluminateHttpResponse;
        use Validator;
        use Input;

       class ItemController extends Controller
       {
              /**
             * Validates given data for account
 * @param array $data
 * @return Validator
 */

protected function validator(array $data)
{
    // Loan account is not validated

    return Validator::make($data,[
        'name'  => 'required','size'   => 'required|max:255'
    ]);

}


/**
 * Store a newly created resource in storage.
 *
 * @param  IlluminateHttpRequest  $request
 * @return IlluminateHttpResponse
 */
public function store(Request $request)
{
    $validator = $this->validator($request->all());
    if($validator->fails()){
        return Response::json( $validator->errors(),400);
    }
    $item=new Item($request->all());
    if($item->save())
    {
        $id=$item->id;
        if ($request->hasFile('photo')) {
            $file = $request->file('photo');
            $image=new File();
            $image->name = $this->uploadImage($file);
            $image->file_id=$id;
            $image->save();
        }
    }

    return Response::json(['error' => 'Server is down'],500);
}


/**
 * To Strore Images
 *
 *
 */

public  function uploadImage($file){

        $storedFileName="";
        if(!empty($file)){

            $extension=$file->getClientOriginalExtension();
            $fileName = rand(22222,99999).'.'.$extension;
            $storedFileName=base_path().'/img/works/'. $fileName;
            $file->move(
                base_path().'/img/works/',$fileName
            );
        }
    return $storedFileName;
}


}

解决方法

要通过AngularJS上传图像,您需要做一些额外的工作.你可以使用像 nervgh/angular-file-upload(或其他一些库)这样的库,也可以自己动手.有关进一步参考,请参阅 this tutorial by egghead

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读