How to echo vue after file upload-Front-end Q&A-php.cn

How to echo vue after file upload

王林

Release： 2023-05-11 11:16:36

Original

2049 people have browsed it

File uploading is one of the common requirements in website development, and Vue, as a popular front-end framework, also has its own set of implementation methods. This article will introduce how to implement file upload in Vue and perform echo operations after the upload is completed.

1. Upload files

Vue needs to use a core component to process file uploads: input[type='file']. This component allows users to select files to upload and convert them into binary data to facilitate subsequent upload operations.

In Vue, file upload can be achieved in the following ways:

Create an input[type='file'] tag and add a change event listening function:

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

Copy after login

Get the file selected by the user in the handleUpload function and convert it into formData format:

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

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

Copy after login

After the upload operation is completed, the upload result can be Store it in the Vue instance to facilitate echo operations.

2. Echo the file

After completing the file upload operation, how to echo the uploaded file? There are many implementation methods in Vue. Two commonly used methods are introduced below.

Transfer data through component props

Pass the upload result to the sub-component through props, and the echo operation can be performed in the sub-component.

In the parent component:

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

Copy after login

In the child component:

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

Copy after login

Pass data through the Vue instance $emit method

An event is triggered through the $emit method of the Vue instance, the upload result is passed to the parent component, and then the echo operation is performed in the parent component.

In the child component:

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

Copy after login

In the parent component:

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

Copy after login

The above are two ways to implement file upload and echo, readers can according to their actual needs Make your selection. Through the above methods, we can conveniently handle file upload and echo operations in Vue, providing convenient support for website development.

The above is the detailed content of How to echo vue after file upload. For more information, please follow other related articles on the PHP Chinese website!