홈>2020-02-03 22:30

vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법

안녕하세요 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를 사용하여 이미지와 입력 이름을 업로드하는 방법과 동일한 방법을 사용하고 싶습니다.

vue.jsvuejs2

답변 # 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' }} })

Python2.net

vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법

관련 자료