按下按钮后如何重置上传的文件

Question

在我的网站上，用户可以在上传的图像上绘图。我添加了一个按钮来完全清除画布，但问题是如果用户想再次在此图像上绘图，他们不能因为上传按钮仍然认为它在那里。 见：https://imgur.com/a/kfcZ4KO

我在画布上使用 vue 和 fabric

这就是我所拥有的

    <b-field position="is-centered" class="file">
      <b-upload required accept="image/*" v-model="filename">
        <a class="button is-primary">
          <b-icon icon="upload"></b-icon>
          <span>Click to upload</span>
        </a>
      </b-upload>
      <span class="file-name" v-if="filename">{{ displayFileName }}</span>
      <a class="button is-primary" v-on:click="clearArtboard">
        <span>Clear</span>
      </a>

我的清除画布方法只有这个。 （我假设我需要在这里添加一些东西？）

    clearArtboard() {
      var canvas = this.__canvas;
      canvas.clear();
    },

文件上传时触发

    async filename(file) {
      this.$Progress.start();
      const data = new FormData();
      data.append("file", file);
      data.append("upload_preset", "");
      const res = await fetch(
        "https://api.cloudinary.com/v1_1//image/upload",
        {
          method: "POST",
          body: data
        }
      );
      const uploadedFile = await res.json();

那么我怎么做才能让上传按钮认为当我按下清除时没有上传文件？谢谢

Answer 1

这感觉更像是一个<input type="file"> 的问题，而不是一个 VueJS 的问题。

文件输入为 JavaScript 提供了一个从浏览器读取文件的 API。文件输入本身并不知道 a) 您是否正在上传文件，或者 b) 一旦完成此类过程，将如何做出反应。

因此，您缺少的是在此过程完成后清除文件输入的一些代码。简而言之，您真正需要的只是类似于fileInput.value = ''

因为这不是真正的 VueJS 问题，而更多的是文件输入问题，所以这里有一个没有 VueJS 的最小示例。

const upload = document.querySelector('#upload')
const btn = document.querySelector('#upload-btn')

// The 'input' event is fired when a file is selected
upload.addEventListener('input', (e) => {
  // In this example, we show the upload button only once a file is chosen
  if (e.target.value) {
    // A file was selected. So enable the upload button
    btn.removeAttribute('disabled')
  } else {
    // No file available. Disable the upload button
    btn.setAttribute('disabled', true)
  }
})

btn.addEventListener('click', async () => {
  // Do some async work here to pretend to be uploading
  btn.classList.add('is-loading')
  await new Promise(resolve => setTimeout(resolve, 1000)) // Simply sleeps for 1s
  btn.classList.remove('is-loading')
  upload.value = '' // Reset the file input
  
  // Dispatch the input event so that the other handler will 
  // run and disable the upload button
  const evt = new CustomEvent('input')
  upload.dispatchEvent(evt)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" rel="stylesheet"/>
<p>
  This example shows how to clear a <code>file</code> input.<br>
  Click the 'Choose File' button to select any file. Once a file is selected, click the upload button.<br>
  <b>Note</b>: No real upload occurs. The button simply circles to <i>pretend</i> to upload and then resets the file input.
</p>
<div>
  <!-- Create a file input to work with -->
  <input id="upload" type="file">
</div>
<div>
  <!-- Create a button to mimic upload -->
  <button class="button" id="upload-btn" disabled>Upload</button>
</div>