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

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>