Question

这是我上传文件的代码，我遇到的问题是我无法取消上传，该怎么办？

fileBtn(e, k){
  e.preventDefault();
  const uploader = document.getElementById('uploader');
  let size = 5242880 // equivale a 5MB -> 5242880
  let getFile = e.target.files[0];
  let file_type = getFile.name.split('.').pop();
  let file_name = getFile.name.substr(0, getFile.name.lastIndexOf("."))
  let storageRef = firebase.storage().ref('archivos/' + getFile.name);
  let task = storageRef.put(getFile);
  task.on('state_changed', function progress(snapshot){
    // handle progress
  }, function error(err){
    // handle error
  }, function complete(){
    // handle success
  );
}

我曾考虑过在onchange方法中创建一个函数，以呈现一个取消按钮来停止上载交易，我之所以这样做是因为，当选择了要上载的文件时，它会自动上载到数据库（Firebase）。我该如何避免这种情况？选择文件后，可以在开始数据上传交易之前将其接受或取消吗？

Answer 1

storageRef.put返回一个UploadTask。该UploadTask具有方法cancel，该方法可以完成您想要的操作。官方文档：https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel

要通过其他功能访问上传任务，您需要将该任务存储在fileBtn中的全局变量中：

this.task = storageRef.put(getFile); // save it globally in component

然后，您需要在事件处理程序中重置任务（错误和完成）：

this.task = null

添加一个调用例如cancelBtn并添加此功能：

cancelBtn() {
    if (this.task) {
        this.task.cancel()
    }
}

如何取消vue.js中文件的上传进度？

1 个答案: