我如何能够使用vue js上传图片？ [英] How can I able to upload picture using vue js?

问题描述

我需要使用vue js上传图片。

我插入图片的html代码是

 < input type =fileid =wizard-picture> 
  

我的vue js代码是..

 < script> 
 submitBox = new Vue（{
 el：#submitBox，
 data：{
 username：''，
 picture：''，
 
}，
 methods：{
 handelSubmit：function（e）{
 var vm = this; 
 data = {}; 
 data ['username '] = this.username; 
 data ['picture'] = this.picture; 
 $ .ajax（{
 url：'http://127.0.0.1:8000/api/添加/ post /'，
数据：数据，
类型：POST，
 dataType：'json'，
成功：函数（e）{
 if （e.status）
 {
 alert（注册成功）
 
 window.location.href =https：//localhost/n2s/registersuccess.html; 
} 
 else {
 vm.response = e; 
 
 alert（注册失败）
} 
} 
} ）; 
返回false; 
} 
}，
}）; 
< / script> 
  

我能做些什么来实现它。这是我第一次做一项工作。我被卡住了。任何人都可以帮助我获得结果吗？

你可以试试这个。只需创建一个新的formData对象并将名称和文件传递给它即可。

将您的输入更改为此

 < input type =fileid =wizard-picture@ change =handleSubmit（$ event）> 
  

您的方法如下：

<$ p








$ data data.append（'name'，'image '）
data.append（'file'，e.target.files [0]）

$ .ajax（{
url：'http://127.0.0.1 ：8000 / api / add / post /'，
data：data，
type：'POST'，
success（）{

} else {

}

}）

}

}

I need to upload the image using vue js.

My html code to insert picture is

 <input type="file" id="wizard-picture">

My vue js code is as..

 <script>
submitBox = new Vue({
el: "#submitBox",
  data: {
   username: '',
   picture: '',

  },
  methods: {
     handelSubmit: function(e) {
           var vm = this;
           data = {};
           data['username'] = this.username;
           data['picture'] = this.picture;
            $.ajax({
              url: 'http://127.0.0.1:8000/api/add/post/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {
               alert("Registration Success")

              window.location.href = "https://localhost/n2s/registersuccess.html";
            }
              else {
                vm.response = e;

               alert("Registration Failed") 
              }
          }
            });
            return false;
}
},
});
         </script>

What can I do to implement the same. This is the first time I am doing a work. I am stuck on the same. Can anybody Please help me to obtain the result?

解决方案

You can try this. Just create a new formData object and pass it the name and file

Change your input to this

<input type="file" id="wizard-picture"  @change="handleSubmit($event)">

And your methods to this:

methods: {
  handleSubmit (e) {

    let data = new FormData()
    data.append('name', 'image')
    data.append('file', e.target.files[0])

    $.ajax({
      url: 'http://127.0.0.1:8000/api/add/post/',
      data: data,
      type: 'POST',
      success () {

      }else{

      }

    })

  }

}

这篇关于我如何能够使用vue js上传图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！