해결중... 리뷰 수정

리뷰 수정을 구현하기 위해서 수정페이지를 따로 만들지 리뷰 작성 페이지를 재활용 할지 고민해봤는데
수정시에는 이전 게시글의 내용이 들어가있어야 하기 때문에 수정 페이지를 따로 만드는것이 좋겠다고 결정내림

지금 걱정되는건..
사진을 여러장 올릴수 있도록 구현해놨는데
수정시에 이 여러장 등록한 사진을 제대로 받아올수있을것인가..
일단 해보자

1. v-if를 걸어서 리뷰 작성자 email과 현재 로그인 되어있는 user의 email이 동일할때만 수정 버튼이 보이도록함..
   -> 이렇게 하면 로그인 안된 상태면 아예 수정버튼이 안보이는거라... 빵집 페이지에서는 로그인을 강요하지도 않기 떄문에.. 흠
   그래도 로그인은 menu에서 하고싶으면 할수 있으니까 ㅇㅋ
   그리고 로그인시 마이페이지에 내 리뷰관리를 만들어야겠음

하 역시나 사진이 문제로다...

• 문제

1. get으로 리뷰 데이터를 받아오니 filedata는 null로 받아옴... 그래서 filename이 일치하는 사진을 서버에서 찾아서(uploads 폴더) buffer값을 다시 넣어줘야하는일이...

router.get('/selectone', async function(req, res, next) {
  try{
    const query = { _id: Number(req.query.review) };
    const result = await Review.findOne(query)

    const images = result.images;
    const buffers = [];

    for (const image of images) {
      const filename = image.filename;
      const buffer = await fs.promises.readFile(`./uploads/${filename}`);
      buffers.push(buffer);
    }
    console.log("버퍼",buffers);

    return res.send({ status : 200, result : result });
  }

  catch(e){
    console.error(e); 
    return res.send({ status : -1, result : e });
  }

});

그런데 이렇게 buffer만 배열에 넣어버리면 buffer배열 따로, 이미지의 다른 정보들은 따로 저장되잖아.. 아 여기서 일단 골치아파짐
그럼 일단 미리보기 안되는것 부터 해결해보자
2. 엘리먼트 플러스를 써서 어떻게 미리보기를 띄우는건지 잘 파악이 안됨...

<div class="reviewImg">
  <el-dialog v-model="state.dialogVisible">

    <img style="width:100%" :src="state.dialogImageUrl" alt="Preview Image" />
  </el-dialog>

  <el-upload action="#" 
	list-type="picture-card" 
	:auto-upload="false" 
	:multiple="true"
	:on-remove="handleRemove"
	:on-preview="handlePreview"
	v-model:file-list="state.files"
  >
  <el-icon><Plus /></el-icon>
</el-upload>
</div>

dialogImageUrl에 냅다 url 주소만 넣으면 되는줄 알았으나 upload로 파일을 넣을때마다 handlePreview가 동작하면서

const handlePreview = (e) => {
  state.dialogImageUrl = e.url;
  state.dialogVisible = true;
}

이렇게 바꿔주는거였음. 그래서 내가 데이터 읽어올때 바로 url을 넣어도 미리보기 창에는 안떴구나~ 라고 생각해서

<img v-for="(url, index) in state.getImageUrl" :key="index" style="width:100%" :src="url" alt="Preview Image" />

그럼 새로 받아오는 이미지, 기존에 있는 이미지를 다른 줄로 나눠서라도 띄워나 지는지 보자.. 해서

const handleData = async() => {
  const url = `/api/review/selectone?review=${state.review}`;
  const headers = { 'Content-Type': 'application/json' };
  const { data } = await axios.get(url, { headers });
  console.log('리뷰데이터', data);

  if (data.status === 200) {
    state.row = data.result;
    state.content = data.result.content;
    state.score = data.result.point +1;
    state.files = data.result.images;

    for (let i = 0; i < data.result.images.length; i++) {
        state.getImageUrl.push(data.result.images[i].imageurl);
    }
    state.dialogVisible = true;
  }
}

이렇게 했떠니 미리보기 썸네일 안에는 안들어가고 모달창으로 기존 사진이 뜸... 미리보기 썸네일에는 사진 꺠진채로 존재해있음....
저기 저 on-preview를 건들여야하는것같은데 수정한 사진도 받아야하므로 저걸 어떻게 건들여야할지..? handleData를 아예 넣어버리니 뭔가.. 형식이 안맞다고 하는데..
이쯤되니까 이미지 파일 받아와서 수정하려면 엘리먼트 플러스를 뺴버려야 할것같다는 생각이 듬. 일단 사진은 안받아오는채로.. 수정하는걸로 잠시 내버려두기로함.