tnbapp/src/views/studio/upload.vue

<template>
  <v-row justify="center" align="center">
    <v-col>
      <v-card
        class="mx-auto"
        outlined
      >
        <v-row justify="center">
          <v-col cols="10">
            <h2>发布视频贴</h2>
          </v-col>
        </v-row>
        <v-row justify="center">
          <div>
            <uploader
              class="uploader-example"
              :options="options"
              :autoStart="true"
              @file-added="onFileAdded"
              @file-success="onFileSuccess"
              @file-progress="onFileProgress"
              @file-error="onFileError"
            >
              <uploader-unsupport />
              <uploader-drop>
                <p>拖动视频文件到此处或</p>
                <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
              </uploader-drop>
              <uploader-list />
            </uploader>
          </div>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <h2>基本信息</h2>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="5">
            <v-card outlined>
              <v-img :src="videoPost.coverUrl" aspect-ratio="1.77" contain max-height="150" alt="封面图，推荐16：9" />
            </v-card>
          </v-col>
          <v-col cols="5">
            <v-file-input
              :rules="rules"
              accept="image/png, image/jpeg, image/bmp"
              prepend-icon="mdi-camera"
              placeholder="上传视频封面"
              label="封面"
              @change="setFile"
            />
            <v-btn color="primary" @click="uploadFile">
              上传
            </v-btn>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="5">
            <v-select
              :items="category"
              label="分区"
              @change="getCategory"
            />
          </v-col>
          <v-col cols="5">
            <v-select
              :items="childCategory"
              label="子分区"
              @change="getChildCategory"
            />
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-text-field
              v-model="videoPost.title"
              placeholder="标题"
              label="标题(50字以内)"
              clearable
              :rules="[() => videoPost.title != null || '标题不能为空']"
            />
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-textarea
              v-model="videoPost.description"
              label="简介(200字以内)"
              clearable
              placeholder="填写更全面的视频信息，让更多的人找到你！"
            />
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-combobox
              v-model="videoPost.tags"
              label="添加标签让更多人找到你（最多6个）"
              multiple
              chips
              clearable
            />
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-btn large color="primary" @click="publish">立即投稿</v-btn>
          </v-col>
        </v-row>
      </v-card>
    </v-col>

    <v-snackbar
      v-model="showMessage"
      :top="true"
      :timeout="3000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </v-row>
</template>

<script>
import { videoCategory, submitVideoPost } from '@/api/media/video'
import { hashFile } from '@/utils/hash'

export default {
  data() {
    return {
      options: {
        target: '//localhost:8000' + '/api/file/upload/video',
        chunkSize: 1024 * 1024 * 20,
        forceChunkSize: true,
        fileParameterName: 'file',
        maxChunkRetries: 3,
        testChunks: true,
        checkChunkUploadedByResponse: function(chunk, message) {
          const objMessage = JSON.parse(message)
          console.log('分片文件检验')
          console.log(objMessage)
          if (objMessage.skipUpload) {
            return true
          }

          return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
        },
        headers: {
          Authorization: 'Bearer ' + this.$store.getters.token
        }
      },
      attrs: {
        accept: 'video/*'
      },
      rules: [
        value => !value || value.size < 2000000 || 'Avatar size should be less than 2 MB!'
      ],
      // 提交给后端的数据
      videoPost: {
        fileId: '',
        videoUrl: '',
        coverUrl: '',
        title: '',
        description: '',
        duration: 0,
        categoryId: -1,
        tags: []
      },
      categoryMap: {
        Set: function(key, value) { this[key] = value },
        Get: function(key) { return this[key] },
        Contains: function(key) { return this.Get(key) !== null },
        Remove: function(key) { delete this[key] }
      },
      category: [],
      childCategory: [],
      nowCategory: {},
      files: [],
      showMessage: false,
      message: ''
    }
  },
  created() {
    this.getVideoCategory()
  },
  methods: {
    onFileAdded(file) {
      file.pause()
      hashFile(file.file).then(res => {
        this.setTitle(file.file.name)
        const formData = new FormData()
        formData.append('filename', file.file.name)
        formData.append('size', file.file.size)
        formData.append('sha256sum', res.sha256sum)
        fetch(`//localhost:8000` + `/api/file/upload/video/prepare`, {
          headers: {
            Authorization: 'Bearer ' + this.$store.getters.token
          },
          method: 'POST',
          credentials: 'include',
          body: formData
        }).then(response => response.json())
          .then(json => {
            const uploadId = json.data.uploadId
            const exist = json.data.exist
            if (exist) {
              this.message = '视频已存在'
              this.showMessage = true
              file.cancel()
            } else {
              this.videoPost.videoId = uploadId
              file.uniqueIdentifier = uploadId
              file.resume()
            }
          })
          .catch(e => {
            return null
          })
      })
    },
    onFileProgress(rootFile, file, chunk) {
    },
    onFileSuccess(rootFile, file, response, chunk) {
      const res = JSON.parse(response)
      if (res.code === 0) {
        const resData = res.data
        if (resData.merged) {
          this.videoPost.fileId = resData.uploadId
          this.videoPost.videoUrl = resData.videoUrl
          this.videoPost.coverUrl = resData.coverUrl
          this.videoPost.duration = resData.duration
        }
      }
    },
    onFileError(rootFile, file, response, chunk) {
      console.log('文件上传错误')
    },
    publish() {
      if (!this.videoPost.fileId) {
        this.message = '你还没有上传视频'
        this.showMessage = true
        return
      }
      if (this.videoPost.title === '' || this.videoPost.coverUrl === '' || this.videoPost.tags.length === 0 || this.videoPost.categoryId === -1) {
        this.message = '标题，封面，标签,分区不能为空'
        this.showMessage = true
        return
      }
      if (this.videoPost.tags.length > 6) {
        this.message = '标签超过6个'
        this.showMessage = true
        return
      }

      submitVideoPost(this.videoPost)
        .then(res => {
          if (res.code === 0) {
            this.message = '投稿成功,等待审核通过后你就可以看到你的视频了'
            this.showMessage = true
            this.$router.push('/studio')
          } else {
            this.message = res.msg
            this.showMessage = true
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    setFile(value) {
      this.files = []
      this.files.push(value)
    },
    setTitle(title) {
      if (title.length > 50) {
        this.videoPost.title = title.substring(0, 50)
      } else {
        this.videoPost.title = title
      }
    },
    uploadFile() {
      if (this.files.length === 0) {
        this.message = '请先选择视频封面，然后上传！'
        this.showMessage = true
        return
      }
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('file[]', this.files[i])
      }
      fetch(`http://file.reghao.cn/api/file/upload/image`, {
        headers: {
          'Authorization': 'Bearer ' + this.$store.getters.token
        },
        method: 'POST',
        credentials: 'include',
        body: formData
      }).then(response => response.json())
        .then(json => {
          if (json.code === 0) {
            this.videoPost.coverUrl = json.data[0].url
          } else {
            this.message = '上传失败，请重试！' + json.message
            this.showMessage = true
          }
        })
        .catch(e => {
          return null
        })
    },
    getVideoCategory() {
      videoCategory()
        .then(res => {
          if (res.code === 0) {
            for (let i = 0; i < res.data.length; i++) {
              const name = res.data[i].name
              this.category.push(name)
              this.categoryMap.Set(name, res.data[i])
            }
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    getCategory(name) {
      // 重置子分区，清除前一次选择分区时留下的缓存
      this.childCategory = []
      this.currentCategory = this.categoryMap.Get(name)
      this.videoPost.categoryId = this.currentCategory.id

      const c = this.currentCategory.children
      if (c) {
        for (let i = 0; i < c.length; i++) {
          this.childCategory.push(c[i].name)
        }
      }
    },
    getChildCategory(name) {
      const c = this.currentCategory.children
      for (let i = 0; i < c.length; i++) {
        if (c[i].name === name) {
          this.videoPost.categoryId = c[i].id
        }
      }
    }
  }
}
</script>

<style>
  .uploader-example {
    width: 500px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>