如何用vue上传视频预览

要在 Vue 中上传视频并预览，可以按照以下步骤操作：

1. 安装并导入 `vue-upload-component` 组件，该组件提供了上传文件的功能。

2. 在模板中添加上传组件并设置相关属性：

<template>
  <div>
    <upload
      ref="upload"
      :action="uploadUrl"
      :headers="headers"
      :multiple="false"
      :data="{ type: 'video' }"
      :extensions="['mp4', 'avi', 'wmv']"
      @input-file="onInputFile"
    >
      <button>选择视频文件</button>
    </upload>
    <video :src="videoUrl" controls></video>
  </div>
</template>

- `ref="upload"`：设置组件的引用，方便后续调用组件的方法。
- `:action="uploadUrl"`：设置上传视频的接口地址。
- `:headers="headers"`：设置请求头，如果需要的话。
- `:multiple="false"`：设置是否支持上传多个文件，这里设置为只上传一个文件。
- `:data="{ type: 'video' }"`：设置上传时需要携带的额外数据，这里设置了一个 `type` 属性，方便服务器端进行视频文件的处理。
- `:extensions="['mp4', 'avi', 'wmv']"`：设置上传文件的扩展名限制，这里只允许上传 mp4、avi、wmv 格式的视频文件。
- `@input-file="onInputFile"`：绑定上传文件时触发的回调函数。

3. 在组件的 `methods` 中定义 `onInputFile` 方法，该方法用于上传视频并预览：

<script>
import Upload from 'vue-upload-component'

export default {
  components: {
    Upload
  },
  data() {
    return {
      uploadUrl: '/api/upload-video',
      headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
      videoUrl: ''
    }
  },
  methods: {
    onInputFile(file) {
      this.$refs.upload.active = true // 开始上传文件
      let formData = new FormData()
      formData.append('file', file)
      axios.post(this.uploadUrl, formData, { headers: this.headers })
        .then(res => {
          this.videoUrl = URL.createObjectURL(file) // 设置视频预览地址
          console.log(res.data)
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

- `formData.append('file', file)`：将上传的视频文件添加到 FormData 中，方便发送给服务器端。
- `axios.post(this.uploadUrl, formData, { headers: this.headers })`：使用 axios 发送上传请求。
- `this.videoUrl = URL.createObjectURL(file)`：设置视频预览地址，这里使用 `URL.createObjectURL()` 方法将上传的文件转换为可预览的 URL。

这样就可以实现在 Vue 中上传视频并预览了。