Larabel 컨트롤러에 BLOB 이미지 저장

Larabel 컨트롤러에 BLOB 이미지 저장

Larabel 5/vuejs 2.6에서 vue-upload-component를 사용하여 이미지를 업로드하고 요청된 이미지 BLOB를 전송합니다.컨트롤러 코드를 사용하여 저장합니다.

    if ( !empty($requestData['avatar_filename']) and !empty($requestData['avatar_blob']) ) {
        $dest_image = 'public/' . Customer::getUserAvatarPath($newCustomer->id, $requestData['avatar_filename']);

        $requestData['avatar_blob']= str_replace('blob:','',$requestData['avatar_blob']);
        Storage::disk('local')->put($dest_image, file_get_contents($requestData['avatar_blob']));
        ImageOptimizer::optimize( storage_path().'/app/'.$dest_image, null );
    } // if ( !empty($page_content_image) ) {

그 결과 이미지가 업로드 되었습니다만, 읽을 수 없습니다.소스 파일에는 5Kb, 결과 파일에는 5.8Kb, 브라우저 콘솔에는 blobs 경로가 표시됩니다.

avatar_blob: "blob:http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af"

올바르게 저장하기 위해 내 BLOB를 변환해야 합니까?

MEDIED : 조금 더 상세하게 : vue 파일에서는 악시오스를 사용하여 요청을 보냅니다.

               let customerRegisterArray =
                    {
                        username: this.previewCustomerRegister.username,
                        email: this.previewCustomerRegister.email,
                        first_name: this.previewCustomerRegister.first_name,
                        last_name: this.previewCustomerRegister.last_name,
                        account_type: this.previewCustomerRegister.account_type,
                        phone: this.previewCustomerRegister.phone,
                        website: this.previewCustomerRegister.website,
                        notes: this.previewCustomerRegister.notes,
                        avatar_filename: this.previewCustomerRegister.avatarFile.name,
                        avatar_blob: this.previewCustomerRegister.avatarFile.blob,
                    };
                console.log("customerRegisterArray::")
                console.log(customerRegisterArray)

                axios({
                    method: ('post'),
                    url: window.API_VERSION_LINK + '/customer_register_store',
                    data: customerRegisterArray,
                }).then((response) => {
                    this.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
alert( "SAVED!!::"+var_dump() )
                }).catch((error) => {
                });

그리고 이 . preview Customer Register . avatar File . blob ::: value value: value: 、 " blob : http://local-hostels2.com " 。여기서 http://local-hostels2.com은 나의 호스트입니다...다음과 같이 정의된 이미지를 미리 보기 위해 이 값을 설정합니다.

            <img
                class="img-preview-wrapper"
                :src="previewCustomerRegister.avatarFile.blob"
                alt="Your avatar"
                v-show="previewCustomerRegister.avatarFile.blob"
                width="256"
                height="auto"
                id="preview_avatar_file"
            >

previewCustomerRegister.avatarFile.blob이 업로드된 파일에 할당되면 미리보기 이미지로 볼 수 있습니다.첫 번째 토픽에서 저장 기능을 사용하여 컨트롤을 표시하지만, 생성된 파일을 kate로 열려고 했을 때 컨테이너 파일 리소스/뷰/index.blade.php의 콘텐츠가 있는 것을 발견했습니다.

내가 무엇을 잘못했고 어떤 방법이 유효한가?

MODED BLOCK #2 : 요청에 'Content-Type'을 추가하였습니다.

axios({
  method: ('post'),
  url: window.API_VERSION_LINK + '/customer_register_store',
  data: customerRegisterArray,
  headers: {
    'Content-Type': 'multipart/form-data'
  }

그러나 요청으로 제어 액션을 정의하기 때문에 제어에서 검증 오류가 발생했습니다.

public function store(CustomerRegisterRequest $request)
{

및 app/Http/Requests/CustomerRegisterRequest에 있습니다.php :

<?php

namespace App\Http\Requests;

use App\Http\Traits\funcsTrait;
use Illuminate\Foundation\Http\FormRequest;
use App\Customer;
class CustomerRegisterRequest extends FormRequest
{
    use funcsTrait;

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        $request= Request();
        $requestData= $request->all();

        $this->debToFile(print_r( $requestData,true),'  getCustomerValidationRulesArray $requestData::');
        /* My debugging method to write data to text file 
        and with Content-Type defined above I see that $requestData is always empty
        and I got validations errors
         */

        // Validations rules 
        $customerValidationRulesArray= Customer::getCustomerValidationRulesArray( $request->get('id'), ['status'] );
        return $customerValidationRulesArray;
    }
}

정의된 routes/api.php:

Route::post('customer_register_store', 'CustomerRegisterController@store');

bhrowser 콘솔에 https://imgur.com/a/0vsPIsa,이 표시됩니다.

Axios 헤더에 문제가 있는 것 같습니다.'Content-Type'이 정의되어 있지 않으면 검증 규칙은 정상적으로 동작합니다.

수정 블록 #3

metod를 사용하여 blob을 가져올 수 있었습니다.

            var self = this;

            fetch(this.previewCustomerRegister.avatarFile.blob) .then(function(response) {
                console.log("fetch response::")
                console.log( response )

                if (response.ok) {
                    return response.blob().then(function(myBlob) {
                        var objectURL = URL.createObjectURL(myBlob);
                        // myImage.src = objectURL;
                        console.log("objectURL::")
                        console.log( objectURL )

                        console.log("self::")
                        console.log( self )



                        let customerRegisterArray =
                            {
                                username: self.previewCustomerRegister.username,
                                email: self.previewCustomerRegister.email,
                                first_name: self.previewCustomerRegister.first_name,
                                last_name: self.previewCustomerRegister.last_name,
                                account_type: self.previewCustomerRegister.account_type,
                                phone: self.previewCustomerRegister.phone,
                                website: self.previewCustomerRegister.website,
                                notes: self.previewCustomerRegister.notes,
                                avatar_filename: self.previewCustomerRegister.avatarFile.name,
                                avatar: objectURL,
                            };

                        console.log("customerRegisterArray::")
                        console.log(customerRegisterArray)

                        axios({
                            method: 'POST',
                            url: window.API_VERSION_LINK + '/customer_register_store',
                            data: customerRegisterArray,
                            // headers: {
                            //     'Content-Type': 'multipart/form-data'  // multipart/form-data - as we need to upload with image
                            // }
                        }).then((response) => {
                            self.is_page_updating = false
                            self.message = ''
                            self.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
                            alert( "SAVED!!::")
                        }).catch((error) => {







  self.$setLaravelValidationErrorsFromResponse(error.response.data);
                            self.is_page_updating = false
                            self.showRunTimeError(error, this);
                            self.showPopupMessage("Customer Register", 'Error adding customer ! Check Details fields !', 'warn');
                            // window.grecaptcha.reset()
                            self.is_recaptcha_verified = false;
                            self.$refs.customer_register_wizard.changeTab(3,0)
                        });


                    });
                } else {
                    return response.json().then(function(jsonError) {
                        // ...
                    });
                }
            }).catch(function(error) {
                console.log('There has been a problem with your fetch operation: ', error.message);
            });

오브젝트 내URL 및 셀프에는 적절한 값이 표시됩니다.https://imgur.com/a/4YvhbFz

1) 그러나 larabel의 제어 하에 있는 서버의 데이터를 확인하면 이미지를 업로드하기 위해 emps를 시작했을 때와 동일한 값을 볼 수 있습니다.

[fatlongred.jpg] => patlongred.jpg [fatlonged] => blob : http://local-hostels2.com/d9bf4b66-42b9-4990-9325-a72dc8c3a392

다른 방법으로 petched bnlob을 조작해야 합니까?

2) 다음을 설정했을 경우:

  headers: {
    'Content-Type': 'multipart/form-data'
  }

데이터가 올바르게 요청되지 않았다는 검증 오류가 발생했습니다.

?

요청 을 '요청하다'로 하고 있습니다application/json이 방법으로는 할 수 은 "파일 업로드"여야 .파일 업로드의 경우 요청 유형은 다음과 같아야 합니다.multipart/form-data을 '요청'으로 됩니다.

let customerRegisterArray = new FormData();
customerRegisterArray.put('username', this.previewCustomerRegister.username);
customerRegisterArray.put('email', this.previewCustomerRegister.email);
....
customerRegisterArray.put('avatar', this.previewCustomerRegister.avatarFile);

console.log("customerRegisterArray::")
console.log(customerRegisterArray)

axios({
  method: ('post'),
  url: window.API_VERSION_LINK + '/customer_register_store',
  data: customerRegisterArray,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then((response) => {
     this.showPopupMessage("Customer Register", 'Customer added successfully !Check entered email for activation link !', 'success');
     alert( "SAVED!!::"+var_dump() )
}).catch((error) => {});

도와주셔서 감사합니다!

유효한 결정은 다음과 같습니다.

        var self = this;

        fetch(this.previewCustomerRegister.avatarFile.blob) .then(function(response) {
            if (response.ok) {
                return response.blob().then(function(myBlob) {

                    var objectURL = URL.createObjectURL(myBlob);

                    let data = new FormData()
                    data.append('username', self.previewCustomerRegister.username)
                    data.append('email', self.previewCustomerRegister.email)
                    data.append('first_name', self.previewCustomerRegister.first_name)
                    data.append('last_name', self.previewCustomerRegister.last_name)
                    data.append('account_type', self.previewCustomerRegister.account_type)
                    data.append('phone', self.previewCustomerRegister.phone)
                    data.append('website', self.previewCustomerRegister.website)
                    data.append('notes', self.previewCustomerRegister.notes)
                    data.append('avatar_filename', self.previewCustomerRegister.avatarFile.name)
                    data.append('avatar', myBlob)

                    axios({
                        method: 'POST',
                        url: window.API_VERSION_LINK + '/customer_register_store',
                        data: data,
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'multipart/form-data'  // multipart/form-data - as we need to upload with image
                        }
                    }).then((response) => {
                        self.is_page_updating = false
                        self.message = ''
                        self.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
                        alert( "SAVED!!::123")
                        // self.$router.push({path: '/'});
                    }).catch((error) => {
                        self.$setLaravelValidationErrorsFromResponse(error.response.data);
                        self.is_page_updating = false

                        self.showRunTimeError(error, this);
                        self.showPopupMessage("Customer Register", 'Error adding customer ! Check Details fields !', 'warn');
                        window.grecaptcha.reset()
                        self.is_recaptcha_verified = false;
                        self.$refs.customer_register_wizard.changeTab(3,0)
                    });


                });
            } else {
                return response.json().then(function(jsonError) {
                    // ...
                });
            }
        }).catch(function(error) {
            console.log('There has been a problem with your fetch operation: ', error.message);
        });

및 공통 larabel의 파일 업로드 기능:

$customerAvatarUploadedFile = $request->file('avatar');
...

언급URL : https://stackoverflow.com/questions/57480146/saving-blob-image-in-laravels-controller