vue 实现上传

Vue 实现文件上传

在 Vue 中实现文件上传可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML input 元素

创建一个文件输入框，通过监听 change 事件获取文件对象：

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

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

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

      // 使用 axios 或其他 HTTP 客户端发送请求
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response)
      }).catch(error => {
        console.error('上传失败', error)
      })
    }
  }
}
</script>

使用第三方组件库

许多流行的 Vue UI 组件库都提供了文件上传组件，例如 Element UI 的 Upload 组件：

<template>
  <el-upload
    action="/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 isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('只能上传 JPG 格式图片!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(response) {
      this.$message.success('上传成功')
    },
    handleError() {
      this.$message.error('上传失败')
    }
  }
}
</script>

实现拖拽上传

通过监听拖放事件实现拖拽上传功能：

<template>
  <div 
    class="drop-area"
    @dragover.prevent="dragover"
    @dragleave.prevent="dragleave"
    @drop.prevent="drop">
    <p>拖拽文件到此处上传</p>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    dragover(event) {
      event.currentTarget.classList.add('dragover')
    },
    dragleave(event) {
      event.currentTarget.classList.remove('dragover')
    },
    drop(event) {
      event.currentTarget.classList.remove('dragover')
      this.file = event.dataTransfer.files[0]
      this.uploadFile()
    },
    handleFileUpload(event) {
      this.file = event.target.files[0]
      this.uploadFile()
    },
    uploadFile() {
      // 上传逻辑同上
    }
  }
}
</script>

<style>
.drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.drop-area.dragover {
  border-color: #409eff;
}
</style>

文件上传进度显示

使用 axios 的 onUploadProgress 回调显示上传进度：

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

  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      this.uploadProgress = percentCompleted
      console.log(percentCompleted + '%')
    }
  }).then(response => {
    console.log('上传完成', response)
  }).catch(error => {
    console.error('上传失败', error)
  })
}

以上方法可以根据具体需求选择使用或组合使用。对于更复杂的需求，可以考虑使用专门的文件上传库如 vue-upload-component 或 uppy。