javascript - 如何在vue js中上传没有base64格式的图片？

Question

当我这样做时，我得到了 base64 编码的图像。我只需要上传文件。我怎样才能更改代码

<script>
submitBox = new Vue({
  el: "#submitBox",
  data: {
  username: '',
  category: '',
  subcategory: [],
  image: '',



  },
  methods: {
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },

    handelSubmit: function(e) {
      var vm = this;
      data = {};
       data['username'] = this.username;
       data['category'] = this.category;
       data['subcategory'] = this.subcategory;
       data['image'] = this.image;
      $.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>

我的html代码是

<div id="submitBox">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/>
    <select title="Select" v-model="category" name="category" ref="category">
      <option v-for="post in articles" v-bind:value="post.name" >{{post.name}}</option>
    </select>
    <input class="form-control" type="file" id="property-images" @change="onFileChange">
  </form>
</div>

如何上传没有base64编码的图片？当我这样做时，我只能上传 base64 格式的图像。我只需要上传文件？

Answer 1

1. 删除 onSubmit 属性(实际上应该拼写为 onsubmit(小写)
2. 使用 vues 拥有事件 modifiers v-on:submit.prevent="handelSubmit"
3. 在handelSubmit函数中移除return false;

你说的“图像”好像是复数？
所以也许你想添加 multiple文件输入的属性？

<input type="file" multiple> 

对我来说，这一切看起来就像您想将来自的 post 请求转换为 ajax 请求。所有信息都已在表格中，因此您可以轻松使用 FormData constructor并选择表单元素。您只需要将名称属性也设置为文件输入即可。

<input type="file" name="image" multiple>

但我没有看到您可能需要手动添加的子类别。

所以这是我会做的:

handelSubmit(e) {
  var form = e.target; // Get hold of the form element from the event
  var fd = new FormData(form); // create a FormData

  // Add the subcategory
  fd.append('subcategory', this.subcategory.join(', '));

  // or do this to get more of a array like:
  // (depends upon server logic)
  // 
  // this.subcategory.forEach(function(category){
  //   fd.append('subcategory', category);
  // })


  // to inspect what the formdata contains
  // better to remove in production
  // spread operator isn't cross browser compitable
  console.log(...fd);
  
  $.ajax({
    url: 'http://127.0.0.1:8000/api/add/post/',
    data: fd, // data is a FormData instance 
    type: "POST",
    processData: false, // stop jQuery's transformation
    contentType: false, // stop jQuery's from setting wrong content-type header
    success(e) {
      if (e.status) {
        alert("Registration Success")
        
        window.location.href = "https://localhost/n2s/registersuccess.html";
      } else {
        vm.response = e;
        
        alert("Registration Failed")
      }
    }
  });

  // For persornal reason i don't like how
  // jQuery are unhandel to accept a FormData
  // 
  // So here are some insporation if you can use the new fetch instead
  /*
  fetch('http://127.0.0.1:8000/api/add/post/', {method: 'post', body: fd})
    .then(function(res){
      // Here you have only recived the headers
      
      console.log(res.ok) // true for 2xx responses, false otherwise

      return res.text() // or .json()
    })
    .then(function(text){
      // Here you have recived the hole response
      console.log(text)
    })
   */
}

我不明白为什么您需要 createImage 和 onFileChange 函数。

你还必须注意的是，当使用 jQuery 的 ajax 和 Formdata 时，你需要将 contentType 和 processData 都设置为 false 否则 jQuery 将对请求做不正确的事情

这会将帖子从 json 有效负载更改为多部分有效负载，这是上传文件的最佳选择...您可以节省更多带宽并需要在服务器上做更少的事情