vue怎么實現文件上傳后回顯

這篇文章主要講解了“vue怎么實現文件上傳后回顯”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue怎么實現文件上傳后回顯”吧！

一、上傳文件

Vue中處理文件上傳需要用到一個核心組件：input[type='file']。該組件可以讓用戶選擇要上傳的文件，并將其轉化為二進制數據，方便后續上傳操作。

在Vue中，可以通過以下方式實現文件上傳：

1. 創建一個input[type='file']標簽，并添加change事件監聽函數：

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

2. 在handleUpload函數中獲取用戶選擇的文件，并將其轉化為formData格式：

methods: {
  handleUpload() {
    const file = this.$refs.uploadFile.files[0] // 獲取用戶選擇的文件
    const formData = new FormData() // 創建formData實例
    formData.append('file', file) // 將文件添加到formData中

    // 發送formData到后端進行上傳操作
    // ...
  }
}

3. 在上傳操作完成后，可以將上傳結果存儲到Vue實例中，方便進行回顯操作。

二、回顯文件

在完成文件上傳操作后，如何將上傳的文件進行回顯呢？Vue中有多種實現方式，下面介紹兩種常用的方式。

1. 通過組件props傳遞數據

通過props將上傳結果傳遞給子組件，即可在子組件中進行回顯操作。

在父組件中：

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

在子組件中：

<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. 通過Vue實例$emit方法傳遞數據

通過Vue實例的$emit方法觸發一個事件，將上傳結果傳遞給父組件，然后在父組件中進行回顯操作。

在子組件中：

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

在父組件中：

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

感謝各位的閱讀，以上就是“vue怎么實現文件上傳后回顯”的內容了，經過本文的學習后，相信大家對vue怎么實現文件上傳后回顯這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！