如何使用 vue js 上传图片？答案

【问题标题】：How can I able to upload picture using vue js?如何使用 vue js 上传图片？
【发布时间】：2018-05-28 09:38:34
【问题描述】：

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

我插入图片的html代码是

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

我的vue js代码是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>

我能做些什么来实现它。这是我第一次做工作。我被困在同一个问题上。任何人都可以帮我获得结果吗？

【问题讨论】：

将 e.target.files[0] 传递给您的 jquery data:
你能解释一下吗
在您的 jquery 中将 data:data 替换为 data:e.target.files[0]
但我还需要传递用户名
至少对上传有用吗？传递名称很简单

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

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

将您的输入更改为此

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

还有你的方法：

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{

      }

    })

  }

}

【讨论】：