So geben Sie Vue nach dem Hochladen einer Datei wieder

Das Hochladen von Dateien ist eine der häufigsten Anforderungen bei der Website-Entwicklung, und Vue verfügt als beliebtes Front-End-Framework auch über eigene Implementierungsmethoden. In diesem Artikel wird erläutert, wie Sie den Datei-Upload in Vue implementieren und nach Abschluss des Uploads Echo-Operationen durchführen.

1. Dateien hochladen

Vue muss eine Kernkomponente verwenden, um Datei-Uploads zu verarbeiten: input[type='file']. Mit dieser Komponente können Benutzer Dateien zum Hochladen auswählen und sie in Binärdaten konvertieren, um nachfolgende Upload-Vorgänge zu erleichtern.

In Vue kann das Hochladen von Dateien auf folgende Weise erreicht werden:

1. Erstellen Sie ein Eingabe[type='file']-Tag und fügen Sie eine Funktion zum Abhören von Änderungsereignissen hinzu:

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
  </div>
</template>

2. Rufen Sie die vom Benutzer ausgewählte Datei ab die handleUpload-Funktion und konvertieren Sie sie in das formData-Format:

methods: {
  handleUpload() {
    const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
    const formData = new FormData() // 创建formData实例
    formData.append('file', file) // 将文件添加到formData中

    // 发送formData到后端进行上传操作
    // ...
  }
}

3. Nach Abschluss des Upload-Vorgangs können die Upload-Ergebnisse in der Vue-Instanz gespeichert werden, um Echo-Vorgänge zu erleichtern.

2. Echo der Datei

Wie kann ich die hochgeladene Datei nach Abschluss des Datei-Uploads wiederholen? Es gibt viele Implementierungsmethoden in Vue. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt.

1. Daten über Komponenten-Requisiten übertragen

Übergeben Sie das Upload-Ergebnis über Requisiten an die Unterkomponente, und Sie können Echooperationen in der Unterkomponente ausführen.

In der übergeordneten Komponente:

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
    <ChildComponent :fileData="fileData"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      fileData: {}
    }
  },
  methods: {
    handleUpload() {
      const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
      const formData = new FormData() // 创建formData实例
      formData.append('file', file) // 将文件添加到formData中

      // 发送formData到后端进行上传操作
      // ...

      // 更新fileData
      this.fileData = {
        url: 'http://www.example.com/xxx.png', // 上传成功后的文件url
        filename: 'xxx.png', // 文件名
        size: file.size // 文件大小
      }
    }
  }
}
</script>

In der untergeordneten Komponente:

<template>
  <div>
    <img :src="fileData.url">
    <div>{{ fileData.filename }}</div>
    <div>{{ fileData.size }}</div>
  </div>
</template>

<script>
export default {
  props: {
    fileData: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

2. Übergeben Sie Daten über die $emit-Methode der Vue-Instanz.

Lösen Sie ein Ereignis über die $emit-Methode der Vue-Instanz aus und übergeben Sie das Upload-Ergebnis zur übergeordneten Komponente hinzufügen und dann Echooperationen in der übergeordneten Komponente ausführen.

In der untergeordneten Komponente:

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
  </div>
</template>

<script>
export default {
  methods: {
    handleUpload() {
      const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
      const formData = new FormData() // 创建formData实例
      formData.append('file', file) // 将文件添加到formData中

      // 发送formData到后端进行上传操作
      // ...

      // 触发事件，将上传结果传递给父组件
      this.$emit('uploadFile', {
        url: 'http://www.example.com/xxx.png', // 上传成功后的文件url
        filename: 'xxx.png', // 文件名
        size: file.size // 文件大小
      })
    }
  }
}
</script>

In der übergeordneten Komponente:

<template>
  <div>
    <ChildComponent @uploadFile="handleFileData"/>
    <img :src="fileData.url">
    <div>{{ fileData.filename }}</div>
    <div>{{ fileData.size }}</div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      fileData: {}
    }
  },
  methods: {
    handleFileData(data) {
      this.fileData = data
    }
  }
}
</script>

Die oben genannten Möglichkeiten zum Implementieren des Datei-Uploads und des Echos können vom Leser entsprechend seinen tatsächlichen Anforderungen ausgewählt werden. Mit den oben genannten Methoden können wir Datei-Upload- und Echo-Vorgänge in Vue bequem verarbeiten und so die Website-Entwicklung bequem unterstützen.

Das obige ist der detaillierte Inhalt vonSo geben Sie Vue nach dem Hochladen einer Datei wieder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!