s3 설정
　사용자 추가
그룹 추가
버킷 정책 추가
AWS의 키 취득
laravel에 처리 추가
AWS 키를 Laravel.env로 설정
※여기의 키가 있는 것, 다니는 키인 것을 처음으로 검증하면 빠르다.
※다른 세세한 처리를 쓰려고도, 원래 키라든지 뚫고 있으면 움직이지 않는다.
　

설치

가끔 메모리 에러적인 것 나올 때 있기 때문에, 그 때는 메모리 사용량을 늘리는 설정 넣으면 좋다.
v2와 v3 라이브러리가 있습니다.
v3 때 php7.2 이상을 사용하여 오류가 발생할 수 있으므로,
그 때는 php의 버전을 올린다.

composer require league/flysystem-aws-s3-v3 ~1.0

무엇이 가장 디버깅 빨리?

tinker로 하거나 매번 laravel로 serve한다.
사용자 인증이 걸리지 않는 부분에 라우팅 1개 추가하여 움직이기도 한다.
디버거라든지 사용하는 것이 보다 좋겠지만, 시간이므로 일단 이것으로 간다.

S3 버킷을 만들어 초기 설정

버킷 정책은 흉내내면서 작성
htps : // / cs. 아 ws. 아마존. 이 m / 그럼 _ jp / 아마 존 S3 / ㅁ st /에서 v / 에 mp HTML
htps : // m / ks 타긴 g / ms / f9d00 0b 또는 25db31888
htps : // 아 ws. 아마존. 이 m / jp / p 레미 m 쏘 rt / k의 w ぇd 굳이 r / s3 - 어썽 s-에서 네 d ぃ s와 b ぇ cts - sy c /

액세스 포인트에도 주의
htps : // / cs. 아 ws. 아마존. 이 m/그럼 _jp/게네라 l/아 st/gr/란데. HTML#s3_레기온

라우팅

이런 느낌을 추가한다.

routes/api.php

...
Route::post('/photo', 'HogeController@uploadImage');
...

컨트롤러에 직접 쓰기

서비스 나누거나 하고 싶은 사람은 나중에 해 주세요.

HogeController.php

    // ----------------------------------------
    // S3 アップロード
    // ----------------------------------------

    /**
     * @param Request $request
     * @return JsonResponse
     */
    public function uploadImage(
        Request $request
    ): JsonResponse {

        $this->validate($request, ['upload_image' => 'required|image']);
        $image = $request->file('upload_image');
        $filename = ((string)(uniqid("img_"))) .".". $image->getClientOriginalExtension();

        $filePath = Storage::disk('s3')
                        ->putFileAs(
                            'uploads'
                            , $image
                            , $filename
                            , [
                                'visibility' => 'public',
                                'ContentType' => 'image/jpeg'
                            ]
                        );
        return response()->json($filePath);
    }

실행

관련있는 장소의 캐시를 지우는 것

ルータ周り
php artisan route:clear
設定周り
php artisan config:cache

php artisan serve

postman라든지로 post한다.

body로 form-data를 선택해
키를 upload_image로 설정하고 파일로 이미지를 선택합니다.

http://localhost:8000/api/photo

에서 postman을 실행.

vue측도

panelIndex는 여기에 쓰지 않았지만 일단 이 부분은 배열로 빙글빙글 돌리는 컴포넌트.
1개의 컴퍼넌트의 때는 깎아 문제 없음.

<div class="large-12 medium-12 small-12 cell">
  <label>
    <input type="file" @change="onFileChange(panelIndex, $event)" />
  </label>
</div>

vue data에 imgFile을 정의.
파일 업로드되면 onFileChange가 달리고 api를 두드려 간다.
laravel에서 url이 반환됩니다.

...
     data() {
         return {
             imgFile: '',
         }
     },
...
 onFileChange(panelIndex, e){
   this.imgFile = e.target.files[0];

   this.submitFile(panelIndex);
 },
 submitFile(panelIndex) {
    let formData = new FormData();
    formData.append('upload_image', this.imgFile);

    axios.post( '/api/photo',
      formData,
      {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => response.data)
      .then(data => {
        this.$set(this.group.reply.panels[panelIndex], 'image_url', data.url)
      })
      .catch(function(){
        console.log('FAILURE!!');
      });
 },

기타 참고

tinker 요약
ht tp // k ~ 엔기 네에 rsc 등 p. 하테나 bぉg. 코m/엔트리/2017/03/04/162158

htps : // 이 m / D3ゔぇl0ぺr / ms / 45b2ddbfc68 예 9cd7 아 3c
htps //w w. 리토 b. 코m/엔트리/8
htps : // 코 m/핀 g/있어 ms/10 아다 8d069에 13d729701

vue에서 axios로 부르는 처리도 쓸 때는 여기가 좋다.