如何使用vue js上传图片?

时间:2017-12-14 10:22:47

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

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

我插入图片的html代码是

 <input type="file" id="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/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>

我可以做些什么来实现相同的目标。这是我第一次做作品。我被困在同一个地方。任何人都可以帮助我获得结果吗?

1 个答案:

答案 0 :(得分:1)

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

将您的输入更改为此

NSBundle *bundle = [NSBundle bundleForClass:[YOUR_CLASS_NAME class]];
NSURL *url = [bundle URLForResource:RESOURCE_BUNDLE_NAME withExtension:@"bundle"];
NSBundle *resourceBundle = [NSBundle bundleWithURL:url];
UIImage* infoImage = [UIImage imageWithContentsOfFile:[resourceBundle pathForResource:@"info" ofType:@"png"]];

你的方法:

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