Как сбросить загруженный файл после нажатия кнопки - PullRequest
Новая
       9

Как сбросить загруженный файл после нажатия кнопки

0 голосов
/ 25 апреля 2019

На моем сайте пользователь может нарисовать загруженное изображение.Я добавил кнопку, чтобы полностью очистить холст, но проблема в том, что, если пользователь захочет снова нарисовать это изображение, он не может этого сделать, поскольку кнопка загрузки по-прежнему считает, что он там.см: 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>

мой метод прозрачного холста имеет только это.(я предполагаю, что мне нужно что-то добавить здесь?) 

    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();

так как мне сделать так, чтобы кнопка загрузки думала, что естьпри нажатии «очистить» файл не загружен?спасибо

1 Ответ

0 голосов
/ 25 апреля 2019

Это больше похоже на <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>
...