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

Question

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

我正在为 canvas

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

我的清除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

这感觉更像是一个 <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>

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

How to reset an uploaded file once a button has been pressed

javascript

html5-canvas

fabricjs

vue.js