Question

要上传图片和表格内容吗？如何上传？想法是将其上传到客户端，然后将其与表单内容一起上传到服务器，对吗？

单击提交时，我想将表单内容和图像上载到服务器，而不是在上载图像时分别上载图像。但是我不知道如何同时上传。你能帮我吗？

<template>
   <form>
      <input type="text" v-model="test">
      <img :src="previewImage" class="uploading-image" />
      <input type="file" accept="image/jpeg" @change=uploadImage>
      <input type="submit"></input>
   </form>
</template>

export default {
  data(){
     return{
        previewImage:null,
        test: ''
     }
   },
   methods:{
            uploadImage(e){
                const image = e.target.files[0];
                const reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onload = e =>{
                    this.previewImage = e.target.result;
                    console.log(this.previewImage);
                };

                const URL = 'http://xxxx'; 

                let data = new FormData();
                data.append('name', 'my-picture');
                data.append('file', event.target.files[0]); 

                let config = {
                  header : {
                    'Content-Type' : 'image/png'
                  }
                }
                axios.put(URL, data,config).then(response => {
                   console.log('image upload response > ', response)
                })
            }

   }

Answer 1

您需要将此添加到表单

<form @submit.prevent="uploadImage">
  <input type="text" v-model="test">
  <img :src="previewImage" class="uploading-image" />
  <input type="file" accept="image/jpeg" >
  <input type="submit"></input>
</form>

如何在Vue中上传图像和表单内容？

1 个答案: