Question

大家好我是Vue 2.5的新手我正在尝试将图像与图像一起发送（注意：我不想将图像保存到数据库保存图像到我创建的文件夹在服务器和数据库中的图像链接）

从服务器端我知道如何处理但我不知道从字体结束，即我如何使用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产品发送

Answer 1

标准（主要）方法是将逻辑拆分为两个，如果要在product上保存图像路径，首先需要将照片上传到服务器并返回其路径。 / p>

伪示例：

组件的数据

{
  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方法

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

已编辑的方法，仅处理服务器上的1张图片

更改输入@change，只需将img保存在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)
    })
}

Answer 2

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

render() {
   return <div dangerouslySetInnerHTML={ { __html : this.state.footy} } />};

Answer 3

对于我使用过的上传文件https://vuetifyjs.com/en/components/file-inputs/

 <v-file-input
   accept="image/png, image/jpeg, image/bmp"
   placeholder="Pick an avatar"
   prepend-icon="mdi-camera"
   v-model="imageData"
  ></v-file-input>
 <v-btn color="primary" @click="onUpload">Upload</v-btn>

我使用的vue方法

onUpload() {      
    let formData = new FormData();
    formData.append('file', this.imageData);
    axios.post(
        "/images/v1/upload"
        ,formData
        ,{headers: {"Content-Type": "multipart/form-data"}}
    )
    .then(response => {
      //...
    })
    .catch(e => {
       //...
    })
}

最诚挚的问候！

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

3 个答案: