vue 怎么实现上传

2026-02-17 00:14:01VUE

实现文件上传功能

在Vue中实现文件上传通常需要结合HTML的<input type="file">元素和JavaScript的FormData对象。以下是具体实现方法：

模板部分

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">上传</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    },
    async submitFile() {
      if (!this.file) return

      const formData = new FormData()
      formData.append('file', this.file)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传成功', response.data)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
  }
}
</script>

使用第三方库简化上传

对于更复杂的需求，可以使用第三方上传组件如vue-upload-component或element-ui的上传组件：

vue 怎么实现上传

使用element-ui上传组件

<template>
  <el-upload
    action="/api/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2MB')
      }
      return isLt2M
    },
    handleSuccess(response) {
      console.log('上传成功', response)
    },
    handleError(err) {
      console.error('上传失败', err)
    }
  }
}
</script>

处理上传进度

如果需要显示上传进度，可以添加进度回调：

vue 怎么实现上传

const config = {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(percentCompleted + '%')
  }
}

axios.post('/api/upload', formData, config)

多文件上传

处理多文件上传时，需要遍历文件列表并添加到FormData：

handleFileUpload(event) {
  const files = event.target.files
  const formData = new FormData()

  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i])
  }

  axios.post('/api/multiple-upload', formData)
}

文件类型限制

在HTML中限制可上传的文件类型：

<input 
  type="file" 
  accept="image/*,.pdf,.doc,.docx"
  @change="handleFileUpload"
/>

或者在JavaScript中进行验证：

beforeUpload(file) {
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
  const isValidType = allowedTypes.includes(file.type)
  if (!isValidType) {
    alert('仅支持JPEG, PNG和PDF文件')
  }
  return isValidType
}