Javascript 如何在vue.js 2上使用ajax上传图像？

我的组件vue如下所示：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="post" :action="baseUrl+'/product/editImage'" enctype="multipart/form-data">
                    ...
                    <input type="file" v-on:change="changeImage" name="image" id="image" required>
                    ...
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        ...
        methods: {
            changeImage(e) {
                data = new FormData();
                data.append('file', $('#image')[0].files[0]);
                var imgname  =  $('#image').val();
                var size  =  $('#image')[0].files[0].size;
                var ext =  imgname.substr( (imgname.lastIndexOf('.') +1) );
                if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG') {
                    if(size<=5000000) {
                        $.ajax({
                            url: window.Laravel.baseUrl+'/product/addImage',
                            type: "POST",
                            data: data,
                            enctype: 'multipart/form-data',
                            processData: false,  // tell jQuery not to process the data
                            contentType: false   // tell jQuery not to set contentType
                        }).done(function(data) {
                            if (!$.trim(data)) {   
                                alert('No response');
                            }
                            else {   
                                var files = e.target.files || e.dataTransfer.files
                                if (!files.length)
                                    return;
                                this.createImage(files[0])
                                this.imageChanged = files[0]
                                $('#image').val(data);
                            }
                        });
                        return false;
                    }
                    else {
                        alert('Sorry File size exceeding from 5 Mb');
                        $('#image').val('');
                    }
                }
                else {
                    alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type ');
                }
            },
            createImage(file) {
                var image = new Image()
                var reader = new FileReader()
                var vm = this

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

...
...
导出默认值{
...
方法：{
更改图像（e）{
数据=新表单数据（）；
data.append（'file'，$（'#image'）[0].files[0]）；
var imgname=$（'#image'）.val（）；
var size=$（'#image'）[0]。文件[0]。大小；
var ext=imgname.substr（（imgname.lastIndexOf（'.'）+1））；
如果（ext=='jpg'| | ext=='jpeg'| | ext=='png'| | ext=='gif'| | ext=='png'| | ext=='jpg'| | ext=='jpeg'）{
如果（尺寸）{
vm.image=e.target.result
};
reader.readAsDataURL（文件）
},
} 
}

我仍然在vue.js 2中使用javascript。因为我仍然对整个vue.js感到困惑

上传图片时，出现如下错误：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="post" :action="baseUrl+'/product/editImage'" enctype="multipart/form-data">
                    ...
                    <input type="file" v-on:change="changeImage" name="image" id="image" required>
                    ...
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        ...
        methods: {
            changeImage(e) {
                data = new FormData();
                data.append('file', $('#image')[0].files[0]);
                var imgname  =  $('#image').val();
                var size  =  $('#image')[0].files[0].size;
                var ext =  imgname.substr( (imgname.lastIndexOf('.') +1) );
                if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG') {
                    if(size<=5000000) {
                        $.ajax({
                            url: window.Laravel.baseUrl+'/product/addImage',
                            type: "POST",
                            data: data,
                            enctype: 'multipart/form-data',
                            processData: false,  // tell jQuery not to process the data
                            contentType: false   // tell jQuery not to set contentType
                        }).done(function(data) {
                            if (!$.trim(data)) {   
                                alert('No response');
                            }
                            else {   
                                var files = e.target.files || e.dataTransfer.files
                                if (!files.length)
                                    return;
                                this.createImage(files[0])
                                this.imageChanged = files[0]
                                $('#image').val(data);
                            }
                        });
                        return false;
                    }
                    else {
                        alert('Sorry File size exceeding from 5 Mb');
                        $('#image').val('');
                    }
                }
                else {
                    alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type ');
                }
            },
            createImage(file) {
                var image = new Image()
                var reader = new FileReader()
                var vm = this

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

未捕获引用错误：未定义数据

似乎data=new FormData（）；不在vue.js上工作

我试过使用javascript，效果很好

但是当我将它实现到vue.js时，它就不起作用了

---

如何解决这个问题？

为了更好地利用Vue，我对您的代码进行了一些修改。除了ajax提交之外，不再使用jQuery

new Vue({
  el:"#app",
  data:{
    allowableTypes: ['jpg', 'jpeg', 'png', 'gif'],
    maximumSize: 5000000,
    selectedImage: null,
    image: null,
    options:{
      url: 'https://httpbin.org/post',
      type: "POST",
      processData: false, 
      contentType: false 
    }
  },
  methods: {
    validate(image) {
      if (!this.allowableTypes.includes(image.name.split(".").pop().toLowerCase())) {
        alert(`Sorry you can only upload ${this.allowableTypes.join("|").toUpperCase()} files.`)
        return false
      }

      if (image.size > this.maximumSize){
        alert("Sorry File size exceeding from 5 Mb")
        return false
      }

      return true
    },
    onImageError(err){
      console.log(err, 'do something with error')
    },
    changeImage($event) {
      this.selectedImage = $event.target.files[0]
      //validate the image
      if (!this.validate(this.selectedImage))
        return
      // create a form
      const form = new FormData();
      form.append('file', this.selectedImage);
      // submit the image
      $.ajax(Object.assign({}, this.options, {data: form}))
        .then(this.createImage)
        .catch(this.onImageError);
    },
    createImage() {
      const image = new Image()
      const reader = new FileReader()
      reader.onload = (e) => {
        this.image = e.target.result
      };
      reader.readAsDataURL(this.selectedImage)
    },
  } 
})

模板

<div id="app">
  <input type="file" v-on:change="changeImage" name="image">
  <input v-if="selectedImage" v-model="selectedImage.name" type="hidden" name="photo" />
  {{image}}
</div>

{{image}

.

可能适合您：
其文件上载功能可用：

HTML

---

实际上，我是为自己创建的，但后来我决定在Github中发布它。我希望您会对此感兴趣。

1.“似乎data=new FormData（）；不使用vue.js”不应该是原因。@J Jin，那么解决方案是什么呢？在“data=new FormData（）”中，您在哪里定义“data”或可以使用“var data=new FormData（）”在.done（function（data）’中，除了'data'之外，你可以使用其他名称吗@J Jin，现在它可以工作了。我这样使用：

let myForm=document.getElementById（'myForm'）；let data=new FormData（myForm）；

你能更新const onDone吗？我这样更新它：

const onDone=（data）=>{if（！$.trim（data））{alert（'No response'）；}如果（！files.length）返回，则{var files=$event.target.files | |$event.dataTransfer.files；this.createImage（files[0]）this.imageChanged=files[0]$（“#图像_已更改”）.val（数据）；}

我曾经显示图像。我尝试这样做，但存在错误：

未捕获的DomeException:未能设置“HTMLInputElement”的“value”属性：此输入元素接受一个文件名，该文件名只能通过编程设置为空字符串。

@TrendingNews是

\image\u changed

一个

img

元素？对不起，我是指n

$（'#image'）.val（数据）；

@TrendingNews不允许为文件输入元素设置值。

Vue.ajax.post('http://example.com', [data], {
  fileInputs: [
    document.getElementById('my-input')
  ]
});