>

안녕하세요 Vue 2.5를 처음 사용합니다. 이미지와 함께 양식을 보내려고합니다 (참고 사항: 데이터베이스에 이미지를 저장하고 싶지 않은 폴더에 이미지를 저장하고 싶습니다. 서버에서 데이터베이스의 이미지 링크)

서버 측에서 처리 방법을 알고 있지만 글꼴 끝에서 알 수 없습니다. 즉, axios를 사용하여 이미지를 서버에 보내는 방법 i는 많이 있지만 혼란 스럽습니다. 내 코드입니다

 <template>
     <input type="text" class="form-control" id="specdesc" v-model="product.specdesc" name="specdesc" placeholder="Enter your name">
      <input type="file"  name="image" id="image"  accept="image/*" >
        <button type="submit" class="btn btn-sm btn-primary"@click.prevent="Submit()"> Submit</button>
  <template>
   <script>
     export default {
           name: 'Addproduct',
           data(){
             return{
                 image: '',
               product:{
                   specdesc:'',
                       },
               }
          },
    methods:{ 
      Submit(){
          var _this=this
        //  console.log(this.image)
          console.log(this.selectedCategory.category_name)
          var product = {
                      specification:this.product.specdesc,
                      imagename:this.image
                    }
      this.$http.post('http://localhost:3000/api/companyproducts',product) 
     .then(function (response) {
            console.log(response.data);
            })
            .catch(function (error) {
              console.log("error.response");
            });
        }
     },
 }
</script>

지금 내 질문은 axios를 사용하여 이미지와 입력 이름을 업로드하는 방법과 동일한 방법을 사용하고 싶습니다.


  • 답변 # 1

    product 에 이미지 경로를 저장하려면 표준 (대부분) 접근법을 논리를 두 개로 나누는 것입니다. 먼저 사진을 서버에 업로드하고 경로를 반환해야합니다.

    의사 예제 :

    구성 요소의 데이터

    {
      imagePath: '',
      productSpect: ''
    }
    
    

    html 와이즈 비즈

    uploadImage 방법

    
    <input type="text" v-model="productSpect" />
    <input type="file" @change="uploadImage" name="image" id="image"  accept="image/*" >
    <button type="submit" @click.prevent="submit"> Submit</button>
    
    

    제출 방법

    uploadImage (e) {
      let img = e.target.files[0]
      let fd= new FormData()
      fd.append('image', img)
      axios.post('/upload-image', fd)
        .then(resp => {
           this.imagePath = resp.data.path
        })
    }
    
    

    서버에서 단 하나의 이미지 만 처리하도록 편집 된 방법

    입력 submit () { let data = { imagePath: this.imagePath, productSpect: this.productSpect } axios.post('/path/to/save', data) } 변경  data () 아래의 속성에 img를 저장하려면 :

    @change
    
    

  • 답변 # 2

    이 질문에는 Vue에만 해당되는 것이 없습니다. axios로 POST 요청을 보내려면 가장 쉬운 방법은 html 양식의 formData를 잡고 Axios에 data 인수로 전달하는 것입니다. Vue에서이 작업을 수행하려면 양식 태그에 심판을 제공 한 다음 양식에서 formData를 만듭니다.

    <input type="file" @change="image = e.target.file[0]" name="image" id="image"  accept="image/*" >
    submit() {
      let fd= new FormData()
      fd.append('image', this.image)
      axios.post('/upload-image', fd)
        .then(resp => {
           this.imagePath = resp.data.path
           let data = {
             imagePath: this.imagePath,
             productSpect: this.productSpect
           }
           axios.post('/path/to/save', data)
        })
    }
    
    
    <form ref="myForm"> // then in your method... var myFormData = new FormData(this.$refs.myForm) axios({ method: 'post', url: 'myurl', data: myFormData, config: { headers: {'Content-Type': 'multipart/form-data' }} })

관련 자료

  • 이전 ETL의 Kylo 및 nifi 사용
  • 다음 c++ - 문자열과 함수 객체