proginn-frontend/pages/user/new_video_upload.vue

<template>
  <div class="box">
    <form @submit.prevent="onSubmit">
      <div class="top flex align-center">
        <van-field v-model="message" name="title" rows="5" autosize type="textarea" maxlength="150" placeholder="添加标题并使用合适的合集，能让更多人看到~"
          show-word-limit />
        <div>
          <van-uploader v-model="fileList" result-type="file" multiple accept="image/*" :max-count="1" :after-read="afterRead" />
          <p>选择封面</p>
        </div>
      </div>

      <div class="tip">
        <div>添加到合集</div>
        <van-field readonly clickable name="provier_id" :value="value.title" right-icon="arrow-down" placeholder="请选择"
          @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" value-key="title" @cancel="showPicker = false" @confirm="onConfirm"
            @change="onChange" />
        </van-popup>
        <van-button class="btn" native-type="button" type="info" block @click="createVideo()">发布</van-button>
      </div>
    </form>
  </div>
</template>

<script>
  import "@/assets/css/common.css";
  import Vue from "vue";
  import {
    Uploader,
    Icon,
    Form,
    Toast,
    Field
  } from "vant";

  export default {
    layout: "opacity_header",
    async asyncData({
      $axios,
      params,
      req
    }) {
      let id = params.id;
      let headers = req && req.headers;
      title: "发布视频";
    },
    head() {
      return {
        title: this.title,
        script: [{
          src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
        }]
      };
    },
    data() {
      return {
        value: "",
        showPicker: false,
        message: "",
        src: "",
        fileList: [],
        columns: [],
        collectID: null,
        vid: this.$route.query.vid,
        file: null
      };
    },
    created() {
      this.needLogin();
      this.getCollect();
    },
    methods: {
      afterRead(file) {
        console.log(file);
        if (file.file.size > 1024 * 1024 * 5) {
          Toast.fail("图片文件超过5M,情重新上传！");
          this.fileList = [];
          return false;
        }
        let that = this;
        let par = new FormData();
        par.append("file", file.file);
        file.status = "uploading";
        file.message = "上传中...";
        this.$axios
          .$post("/upload_image", par, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            that.fileList = [{
              url: res.filename
            }];
            file.status = "done";
            file.message = "上传成功";
          });
      },
      onChange(picker, value, index) {
        this.collectID = index;
      },
      createVideo() {
        let that = this;

        //检测描述的长度
        let message = that.message.replace(/(^\s*)|(\s*$)/g, "");
        if (message.length < 10) {
          Toast.fail("视频描述应大于10个字");
          return false;
        }
        if (message.length > 150) {
          Toast.fail("视频描述不能超过150字");
          return false;
        }

        Toast.loading({
          message: "正在发布...",
          forbidClick: true,
          loadingType: "spinner"
        });
        var pdata = {
          video_id: that.vid,
          title: that.message,
          provider_id: Number(that.value.id) ? Number(that.value.id) : ''

        }
        if (that.fileList[0]) {
          pdata.cover_url = that.fileList[0].url ? that.fileList[0].url : ''
        }

        this.$axios
          .$post("/api/jishuquan/create_video", pdata)
          .then(res => {
            Toast.setDefaultOptions({
              onClose: function() {
                window.location.href = "/";
              }
            });
            Toast.success("发布成功");
            Toast.resetDefaultOptions();
          });
      },
      getCollect() {
        let that = this;
        this.$axios
          .$post(
            "/api/jishuquan/get_collections", {
              uid: this.userinfo.uid
            }, {
              neverLogout: true
            }
          )
          .then(res => {
            that.columns = res.data;
          });
      },
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      }
    }
  };
</script>
<style>
  .btn {
    margin: 0.86rem 0;
  }

  .van-cell.van-cell--clickable {
    margin-top: 0.1rem;
    padding: 0.2rem 0.2rem;
    border-radius: 0.06rem;
    font-weight: 400px;
    border: 1px solid rgba(215, 223, 232, 0.5);
  }

  .tip {
    font-size: 0.28rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(25, 34, 46, 1);
    line-height: 0.4rem;
    padding: 0.2rem 0.4rem;
  }

  .top {
    width: 100%;
  }

  .box {
    width: 95%;
    margin: 0.4rem auto;
  }

  body {
    background-color: white;
  }
</style>
<style lang='less' scoped>
</style>