Question

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

我在画布上使用vue和面料

这是我所拥有的

    <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>

我的透明canvas方法只有这个。（我想我需要在这里添加一些内容？）

    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

与VueJS问题相比，这更像是一个<input type="file">问题。

文件输入为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>

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

1 个答案: