vue实现文件的上传

Vue 文件上传实现方法

使用原生 HTML 文件输入元素

在 Vue 组件中可以直接使用 HTML 的原生文件上传控件，通过 v-on 监听 change 事件获取文件对象。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      console.log('Selected file:', file)
    }
  }
}
</script>

使用第三方库 vue-upload-component

vue-upload-component 是一个专门为 Vue 设计的文件上传组件，支持多文件上传、拖拽上传等功能。

安装依赖：

npm install vue-upload-component

使用示例：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/upload"
      @input-filter="inputFilter"
    ></file-upload>
    <button @click="$refs.upload.active = true">Select Files</button>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component'
export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    }
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 文件类型过滤
        if (!/\.(jpeg|jpg|png)$/i.test(newFile.name)) {
          return prevent()
        }
      }
    }
  }
}
</script>

使用 Axios 实现文件上传

结合 Axios 可以方便地实现文件上传到服务器的功能。

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

<script>
import axios from 'axios'
export default {
  methods: {
    async uploadFile(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('Upload success:', response.data)
      } catch (error) {
        console.error('Upload failed:', error)
      }
    }
  }
}
</script>

文件预览实现

可以在上传前预览图片文件，提升用户体验。

<template>
  <div>
    <input type="file" @change="previewFile" />
    <img v-if="imageUrl" :src="imageUrl" width="200" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null
    }
  },
  methods: {
    previewFile(event) {
      const file = event.target.files[0]
      if (!file.type.match('image.*')) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

文件上传进度显示

通过 Axios 的 onUploadProgress 可以实时获取上传进度。

methods: {
  async uploadFile(event) {
    const file = event.target.files[0]
    const formData = new FormData()
    formData.append('file', file)

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          console.log(`Upload progress: ${percentCompleted}%`)
        }
      })
      console.log('Upload success:', response.data)
    } catch (error) {
      console.error('Upload failed:', error)
    }
  }
}

以上方法涵盖了 Vue 中实现文件上传的常见需求，可以根据项目实际情况选择合适的方式或组合使用。