vue上传照片怎样实现

使用 Vue 实现照片上传功能

基础实现（使用原生 HTML 文件输入）

创建一个文件输入元素，绑定 change 事件来获取文件：

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

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

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

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

使用第三方组件（如 Element UI）

对于更丰富的 UI 体验，可以使用 UI 库提供的上传组件：

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

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file) {
      console.log('上传成功', response)
    },
    handleError(err, file) {
      console.error('上传失败', err)
    },
    beforeUpload(file) {
      const isImage = file.type.includes('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB')
      }

      return isImage && isLt2M
    }
  }
}
</script>

图片预览功能

在文件选择后立即显示预览：

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

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

      this.imageUrl = URL.createObjectURL(file)

      // 记得在组件销毁时释放对象 URL
    },
    beforeDestroy() {
      if (this.imageUrl) {
        URL.revokeObjectURL(this.imageUrl)
      }
    }
  }
}
</script>

多文件上传

支持一次选择多个文件并上传：

<template>
  <div>
    <input type="file" @change="handleFileUpload" multiple accept="image/*" />
    <button @click="uploadFiles">上传所有</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files)
    },
    uploadFiles() {
      if (this.files.length === 0) return

      const formData = new FormData()
      this.files.forEach(file => {
        formData.append('files[]', file)
      })

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

进度显示

显示上传进度：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传</button>
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

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

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

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

这些方法提供了从基础到高级的照片上传实现方式，可以根据项目需求选择合适的方案。