Vue 图片上传并浏览器实时预览 - 前端代码示例

<template>
  <div>
    <input type='file' @change='onFileChange'>
    <img v-if='imageUrl' :src='imageUrl' alt='uploaded image'>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: null
    }
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('image', file)
      axios.post('/api/upload', formData)
        .then(response => {
          this.imageUrl = response.data.imageUrl
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style>
/* Optional CSS styling */
</style>