Javascript Vue Js-在文件输入更改后发送axios请求

编辑

解决了背靠背运行两个不同函数的问题。然而，我的问题专门涉及文件处理输入的行为以及链接第二个事件的时刻（由@Igor的答案中的第二个示例解决）

问题

我有一个文件上传Vue组件，它工作得非常好。我想做的改进是让它在“一次点击”上工作，这意味着应该触发

upload（）

方法来响应

createImage（）

完成。我该怎么做

<template>
<div>
    <div>
        <label>Image:</label>
        <img :src="(image) ? image : tempImage" class="img-fluid">
        <div class="custom-file">
            <input type="file" v-on:change="onFileChange" class="custom-file-input"
            :class="{ 'border-0':image }">
            <label class="custom-file-label" for="customFile">
                {{ filename ? filename : 'Choose pic' }}
            </label>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-block" 
        :disabled="!image"
        @click.prevent="upload">
            Upload
        </button>
    </div>
</div>
</template>
<script>
    export default{
        props: ['tempImage'],
        data(){
            return {
                image: '',
                filename: ''
            }
        },
        methods: {
            onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                this.$parent.uploading = true;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage(file) {
                let reader = new FileReader();
                let vm = this;
                reader.onload = (e) => {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
                vm.filename = file.name;
            },
            upload(){
                console.log(this.image);
                axios.post('/api/upload',{image: this.image}).then(res => {
                    if( !res.data.errors ){
                       this.$parent.tempData.image = res.data.src;
                       this.$parent.uploading = false;
                    } else {
                        console.log(res.data.errors);
                    }
                });
            }
        }
    }
</script>

图片：
{{filename？filename:'选择pic'}
上传
导出默认值{
道具：['tempImage']，
数据（）{
返回{
图像：“”，
文件名：“”
}
},
方法：{
onFileChange（e）{
让files=e.target.files | | e.dataTransfer.files；
此.$parent.upload=true；
如果（！files.length）
返回；
此.createImage（文件[0]）；
},
createImage（文件）{
let reader=new FileReader（）；
让vm=这个；
reader.onload=（e）=>{
vm.image=e.target.result；
};
reader.readAsDataURL（文件）；
vm.filename=file.name；
},
上传（）{
console.log（this.image）；
post（'/api/upload'，{image:this.image}）。然后（res=>{
如果（！res.data.errors）{
这是.$parent.tempData.image=res.data.src；
此.$parent.upload=false；
}否则{
console.log（res.data.errors）；
}
});
}
}
}

首先创建一个初始值为

false

的变量。然后在方法

upload

中，首先检查

isupload

变量是否为false，如果为false，则启动upload，否则，不执行任何操作或通知用户页面仍在上载图像

代码可能如下所示：

var=false；
导出默认值{
// ...
上传（）{
//如果没有上传任何内容，请开始上传
如果（！正在上载）{
IsUpload=true；
console.log（this.image）；
axios.post（“/api/upload”{
图片：这个
})。然后（res=>{
如果（！res.data.errors）{
这是.$parent.tempData.image=res.data.src；
此.$parent.upload=false；
}否则{
console.log（res.data.errors）；
}
});
}否则{
//在这里做其他事情
}
}
// ...
}

首先创建一个初始值为

false

的变量。然后在方法

upload

中，首先检查

isupload

变量是否为false，如果为false，则启动upload，否则，不执行任何操作或通知用户页面仍在上载图像

代码可能如下所示：

var=false；
导出默认值{
// ...
上传（）{
//如果没有上传任何内容，请开始上传
如果（！正在上载）{
IsUpload=true；
console.log（this.image）；
axios.post（“/api/upload”{
图片：这个
})。然后（res=>{
如果（！res.data.errors）{
这是.$parent.tempData.image=res.data.src；
此.$parent.upload=false；
}否则{
console.log（res.data.errors）；
}
});
}否则{
//在这里做其他事情
}
}
// ...
}

从

createImage（）

调用

upload（）

怎么样

或者将

upload（）

作为回调传递：

onFileChange(e) {
  let files = e.target.files || e.dataTransfer.files;
  this.$parent.uploading = true;
  if (!files.length)
    return;
  this.createImage(files[0], this.upload);
},
createImage(file, callback) {
  let reader = new FileReader();
  let vm = this;
  reader.onload = (e) => {
    vm.image = e.target.result;
    vm.filename = file.name;
    if (callback) callback();
  };
  reader.readAsDataURL(file);
}

---

从

createImage（）

调用

upload（）

怎么样

或者将

upload（）

作为回调传递：

onFileChange(e) {
  let files = e.target.files || e.dataTransfer.files;
  this.$parent.uploading = true;
  if (!files.length)
    return;
  this.createImage(files[0], this.upload);
},
createImage(file, callback) {
  let reader = new FileReader();
  let vm = this;
  reader.onload = (e) => {
    vm.image = e.target.result;
    vm.filename = file.name;
    if (callback) callback();
  };
  reader.readAsDataURL(file);
}

---

可能重复的可能重复的可能重复的我已经尝试了您的第一种方法，但没有成功，因为调用

upload（）

时

image

是空的（这就是

image

被记录的原因）。尝试了第二种方法，结果是一样的。我已经尝试了第一种方法，但没有成功，因为调用

upload（）

时

image

是空的（这就是

image

被记录的原因）。试过第二个，结果是一样的。