如何使用 axios 将图像上传到服务器

Question

我正在尝试发送一张表格和一张图片。 注意：我不想将图像保存在数据库中，我想将它保存在我在服务器上创建的文件夹中，然后将图像链接添加到数据库中。

从服务器端我知道如何处理这个，但我不知道如何从字体端执行此操作。换句话说，如何使用 axios 将图像发送到服务器。

 <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 上传图像以及输入名称。此外，我想使用相同的方法即 var product 发送。

原文由 Rocky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个标准的（大部分）方法是将逻辑一分为二，如果你想将图像路径保存在你的 product ，你首先需要将照片上传到服务器并返回它们的路径。

伪例子：

组件的数据

    {
      imagePath: '',
      productSpect: ''
    }
``

``html

<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 method**

    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 method**

    submit () {
      let data = {
        imagePath: this.imagePath,
        productSpect: this.productSpect
      }

      axios.post('/path/to/save', data)
    }

**edited method to handle just only 1 image on the server**

Change the input `@change` to just save the img on a property under data():

    <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)
        })
    }

原文由 DobleL 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个问题没有什么特定于 Vue 的。要使用 axios 发送 POST 请求，最简单的做法是获取 html 表单的 formData 并将其作为数据参数传递给 axios。要在 Vue 中执行此操作，只需给表单标签一个 ref，然后从表单创建一个 formData。

 <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' }}
})

原文由 bbsimonbb 发布，翻译遵循 CC BY-SA 3.0 许可协议