Vue 양식에서 그림을 처리하는 방법

5364 단어 vue양식그림 처리

질문:


저는 Vue에 블로그 게시물을 올리는 데 사용되는 폼이 있습니다. 제목, 본문, 설명, 부분과 사진 등 범위가 있습니다.모든 것은 필수적이다.이 문제를 처리하기 위해 Express에 API를 설치했습니다.Postman에서 정상적으로 테스트를 했지만 브라우저를 통해 데이터베이스에 파일을 보내는 방법을 몰랐습니다.나는 줄곧 500개의 오류를 받았고 데이터를 컨트롤러에 인쇄했는데 그림 필드가 비어 있어서 이것이 문제라고 확신하지만, 나는 어떻게 해야 할지 모르겠다.
이것은 내 전단 페이지의 폼입니다.

<template>
 <div class="container">
  <div id="nav">
   <adminnav/>
  </div>
  <div id="create">
   <h1>Create new post</h1>
  </div>
  <div id="post">
   <body>
    <form>
     <label for="title">Title: </label>
     <textarea v-model=formdata.title rows="5" cols="60" name="title"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="body">Body: </label>
     <textarea v-model=formdata.body rows="5" cols="60" name="body"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="description">Description: </label>
     <textarea v-model=formdata.description rows="5" cols="60" name="description"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="snippet">Snippet: </label>
     <textarea v-model=formdata.snippet rows="5" cols="60" name="snippet"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="file">Upload photo: </label>
     <input
      class="form-control-file"
      type="file"
      accept="image/*"
      v-bind="formdata.photo"
     />
     <br/>
     <input id="submit" type="submit" value="submit" @click.prevent="createPost()"/>
    </form>
   </body>
  </div>
 </div>
</template>

<script>
import adminnav from '../components/adminnav.vue';
import PostService from '../service/PostService';

export default {
 name: 'createStory',
 components: {
  adminnav,
 },
 data() {
  return {
   formdata: {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: null,
   },
  };
 },
 methods: {
  createPost() {
   console.log(this.formdata);
   /* eslint prefer-destructuring: 0 */
   const formdata = this.formdata;
   PostService.createPost(formdata)
    .then(() => {
     console.log('success');
    });
  },
 },
};
</script>
POST 요청입니다.

router.post("/add-story", upload.single('photo'), async(req, res) => {
 try{
  let post = new Post();
  post.title = req.body.title;
  post.description = req.body.description;
  post.photo = req.file.location;
  post.body = req.body.body;
  post.snippet = req.body.snippet;

  await post.save();

  res.json({
   status: true,
   message: "Successfully saved."
  });

 } catch(err) {
  res.status(500).json({
   success: false,
   message: err.message
  });
 }
});

해결 방법


파일 <input> 의 change 이벤트를 모니터링합니다.이렇게 하면 매번 사용자의 업로드 행위 트리거updatePhoto 방법을 확보하고 파일 데이터를 this.photo에 저장할 수 있다.

<input type="file" accept="image/*" class="form-control-file"
  @change="updatePhoto($event.target.name, $event.target.files)"
>
모든 데이터를 수집하고 요청을 보내는 인코딩

// vue 
data () {
  return {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: {} //  
  };
},
methods: {
  updatePhoto (files) {
    if (!files.length) return;

    //  
    this.photo = {
      name: files[0].name,
      data: files[0]
    };
  },
  createPost() {
    let formData = new FormData();

    formData.append('title', this.title);
    formData.append('body', this.body);
    formData.append('description', this.description);
    formData.append('snippet', this.snippet);
    formData.append('photo', this.photo.data, this.photo.name);

    PostService.createPost(formdata)
    .then(() => {
      console.log('success');
    });
  }
}
// vue
분명히 나는 모든 vue 구성 요소 구조를 뛰어넘었다. 나는 이 문제와 무관하고 요청을 시작하기 전에 파일 데이터가 사용할 수 있도록 하는 검사 등이 있다고 믿는다.이것은 파일 데이터를 어떻게 얻는지에 대한 생각입니다. 따라서 이 답안이 당신에게 깨우침을 줄 수 있기를 바랍니다.
이상은 Vue 폼에서 그림을 처리하는 방법에 대한 상세한 내용입니다. Vue 폼에서 그림을 처리하는 것에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!
vue 구성 요소 기초 지식 총결산
Java UrlRewriter 위조 정적 기술 활용 깊이 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage