не удалось правильно загрузить с помощью ng-file-upload и laravel

Я пытаюсь реализовать функцию, чтобы пользователь мог загрузить фотографию профиля для страницы нашей компании. Я использую плагин ng-file-upload в angular: https://github.com/danialfarid/ng-file-upload

Я следовал одному примеру из документации по загрузке фото:

    function uploadPic ( file ) {
        file.upload = Upload.upload( {
            url: 'api/companyprofile/upload_logo',
            method: 'POST',
            sendFieldsAs: 'form',
            headers: {
                'my-header': 'my-header-value'
            },
            file: file,
            fileFormDataName: 'myLogo.png'
        } );

        file.upload.then( function ( response ) {
            $timeout( function () {
                file.result = response.data;
            } );
        }, function ( response ) {
            if ( response.status > 0 )
                logger.error( response )
        } );

        file.upload.progress( function ( evt ) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min( 100, parseInt( 100.0 * evt.loaded / evt.total ) );
        } );
    }

а это html

                            <form name="myForm" enctype="multipart/form-data">
                                <fieldset>
                                    <legend>Upload on form submit</legend>
                                    <br>Photo:
                                    <input type="file" ngf-select ng-model="picFile" name="cp_logo" accept="image/*" ngf-max-size="2MB" required>
                                    <i ng-show="myForm.file.$error.required">*required</i>
                                    <br>
                                    <i ng-show="myForm.file.$error.maxSize">File too large 
      {{picFile.size / 1000000|number:1}}MB: max {{picFile.$errorParam}}</i>
                                    <img ng-show="myForm.file.$valid" ngf-src="!picFile.$error && picFile" class="thumb">
                                    <br>
                                    <button ng-click="vm.uploadPic(picFile)">Submit</button>
                                    <span class="progress" ng-show="picFile.progress >= 0">
    <div style="width:{{picFile.progress}}%" 
        ng-bind="picFile.progress + '%'"></div>
  </span>
                                    <span ng-show="picFile.result">Upload Successful</span>
                                    <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
                                </fieldset>
                                <br>
                            </form>

Проблема в том, что я получаю код состояния 200, говорящий мне, что он успешно загрузил фотографию, но на самом деле это не так. Дал мне пустой ответ. Что я делаю не так?

Отказ от ответственности: я не знаю php, но это внутренний код от нашего внутреннего разработчика. Это может помочь

/**
 * Upload a Company Logo (Synchronous).
 * @route GET - prefix/companyprofile/upload_logo
 *
 * @return json
 */
public function uploadLogo() 
{
    // get the company profile object
    $cProfile = CompanyProfile::first();
    // get all inputs from the form
    $input = Input::all();
    // needs validation
    $validator = Validator::make(Input::all(), ['cp_logo' => 'image|max:'.$this->max_filesize]);
    if ($validator->fails()) {
        return array('error' => $validator->messages());
    }
    // if there is a cp_logo store in $file variable
    if($file = array_get($input,'cp_logo')) {
        // delete old company logo
        $this->deleteOldCompanyLogo($cProfile);
        // concatenate the filename and extension
        $input['filename'] = $this->generateFileName($file);
        // save the company logo filename in the database
        $this->saveCompanyLogo($cProfile, $input['filename']);
        try {
            // upload the files to the file server
            Storage::disk(env('FILE_STORAGE'))->put($input['filename'],  File::get($file));
            return response()->json(['status' => 'Upload successful', 'filename' => $input['filename']]);
        } catch(\Exception $e) {
            return response()->json(['error' => $e->getMessage()], 400);
        }
    }
}

person Monece Solis    schedule 03.09.2015    source источник
comment
Посмотрите, действительно ли файл отправляется на вкладке сети браузера. Если это так, то это проблема с php-кодом, который не сохраняет его должным образом. Вы можете попросить внутреннего разработчика зарегистрировать, действительно ли файл получен.   -  person danial    schedule 03.09.2015
comment
Я попытался поместить другой параметр в поля @danial объекта file.upload: {cp_logo: 'filename.png'}, и теперь он дает мне ответ {ошибка: {cp_logo: [Логотип cp должен быть изображением.]} }   -  person Monece Solis    schedule 03.09.2015
comment
мой короткий ответ: fileFormDataName: 'cp_logo'   -  person aifarfa    schedule 03.09.2015
comment
Это сработало! Большое спасибо! Можете ли вы объяснить мне причину этого? @айфарфа   -  person Monece Solis    schedule 03.09.2015
comment
да, простая html-форма использует <input name="..." в качестве ключа данных, но ng-file-upload переопределяет его полем fileFormDataName. :)   -  person aifarfa    schedule 03.09.2015
comment
Ох, ну ладно. спасибо за голову. уже несколько дней ломаю голову @aifarfa не понимала, что это поле нужно   -  person Monece Solis    schedule 03.09.2015


Ответы (1)


ваш сервер ожидает ввода с именем "cp_logo"

function uploadPic(file) {
    if (!file || file.$error) {
        logger.error(file);
        return;
    }
    file.upload = Upload.upload({
        url: 'api/companyprofile/upload_logo',
        method: 'POST',
        sendFieldsAs: 'form',
        headers: {
            'my-header': 'my-header-value'
        },
        file: file,
        fileFormDataName: 'cp_logo' //<-- here is your POST data key send to server
    });

и так как в вашем html-вводе с именем "cp_logo"

<input type="file" ngf-select ng-model="picFile" name="cp_logo" accept="image/*" ngf-max-size="2MB" required>

ваше выражение проверки должно быть.. myForm.cp_logo.$error или myForm.cp_logo.$valid

также дважды проверьте ввод загрузки перед отправкой

HTML

<img ng-show="myForm.cp_logo.$valid" ngf-src="!picFile.$error && picFile" class="thumb">
<br>
<button ng-click="vm.uploadPic(picFile)" ng-disabled="!myForm.$valid" >Submit</button>

^ если эта кнопка отключена, очевидно, что-то не так с вводом

Кстати: бэкенд мог вернуть статус 200 (ОК), когда проверка не удалась.

вы можете проверить ответ json

file.upload.then(function(response) {
    $timeout(function() {
        logger.log(response.data); 
        if(response.data.error){
            //something went wrong?
        }
        file.result = response.data;
    });
}, function(response) {
    if (response.status > 0)
        logger.error(response)
});
person aifarfa    schedule 03.09.2015
comment
Я проверил ответ json, и это очень странно, потому что он говорит о статусе: 200 statusText: OK - person Monece Solis; 03.09.2015
comment
Я попробовал простой html-файл для загрузки без ng-file-upload или angular, и он работал просто отлично ‹form action=upload_logo method=post enctype=multipart/form-data› - person Monece Solis; 03.09.2015
comment
Мне не хватало fileFormDataName: 'cp_logo' - person Monece Solis; 03.09.2015