Question

编辑

This answer确实解决了背靠背运行两个不同功能的问题。但是，我的问题专门涉及文件处理输入的行为以及链接第二个事件的时间（由@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>

Answer 1

从upload()呼叫createImage()怎么办？

createImage(file) {
  let reader = new FileReader();
  let vm = this;
  reader.onload = (e) => {
    vm.image = e.target.result;
    vm.filename = file.name;
    this.upload();
  };
  reader.readAsDataURL(file);
}

或传递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);
}

Fiddle

Answer 2

首先，您创建一个变量 isUploading，其初始值为false。然后，在您的方法upload中，您首先检查 isUploading变量是否为假，如果变量为，开始上载 >，否则，什么也不做，或者通知用户该页面仍在上传图像。

代码看起来像这样：

var isUploading = false;
export default {
  // ...
  upload() {
    // If not uploading anything start the upload
    if (!isUploading) {
      isUploading = true;
      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);
        }
      });
    } else {
      // Do other stuff here
    }
  }
  // ...
}

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

2 个答案: