boss/pages/main/index/sale_vod_edit.vue

<template>
  <div class="mainContainer">

    <div class="pform-head">
      <h3>编辑课程</h3>
    </div>

    <div class="pform-body">
      <el-form :model="vodForm" label-width="100px">
        <el-form-item label="课程所属UID">
          <el-input v-model="vodForm.uid" placeholder="用户UID" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="课程标题">
          <el-input v-model="vodForm.title"></el-input>
        </el-form-item>
        <el-form-item label="课程大纲">
          <el-input type="textarea" v-model="vodForm.content" placeholder="请输入内容"
                    minlength="5"
                    maxlength="5000" rows="6"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="课程价格">
          <el-input v-model="vodForm.price" placeholder="单位：元" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="课程首页图">
          <el-upload
            class="img-uploader"
            action="/api/admin/sale/uploadImg"
            :show-file-list="false"
            :on-success="handleImgSuccess"
            :before-upload="beforeImgUpload"
          >
          <img v-if="vodForm.img_icon" :src="vodForm.img_icon" class="img" />
          <i v-else class="el-icon-plus img-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="试看视频">
          <el-upload
            action=""
            :show-file-list="false"
            :http-request="fileChange"
            >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="file-upload">
            <span>上传进度: {{statusText}}</span>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="authProgress"></el-progress>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" style="margin-left: 100px;" @click="submitVod">保存</el-button>
      </div>
    </div>

  </div>
</template>

<script>
  import '@/assets/js/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js';

  export default {
    head() {
      return {
        script: [
          {src: 'https://gosspublic.alicdn.com/aliyun-oss-sdk-6.13.0.min.js'},
        ]
      }
    },
    data() {
      return {
        vodForm:{
          title:'',
          content:'',
          uid:'',
          price:'',
          img_icon:'',
        },
        videoFile: null,
        videoId:0,
        videoUrl:'',
        authProgress: 0,
        uploader: null,
        statusText: ''
      }
    },
    computed: {

    },
    mounted() {
      this.getData();
    },
    methods: {
      handleImgSuccess(res, file) {
        this.vodForm.img_icon = res.data.file_url_abs
      },
      beforeImgUpload(file) {
        return true
      },
      fileChange (e) {
        this.videoFile = e.file
        if (this.uploader) {
          this.uploader.stopUpload()
          this.authProgress = 0
          this.statusText = ""
        }
        this.uploader = this.createUploader()
        this.uploader.addFile(this.videoFile)
        this.authUpload();
      },
      authUpload () {
        // 然后调用 startUpload 方法, 开始上传
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.uploadDisabled = true
        }
      },
      createUploader (type) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: 60000,
          partSize: 1048576,
          parallel: 5,
          retryCount: 3,
          retryDuration: 2,
          region: 'cn-shanghai',
          userId: '1024',
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.statusText = '添加文件成功, 等待上传...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            self.$post("/api/admin/upload/video", {filename: uploadInfo.file.name}).then(({data}) => {
                let uploadAuth = data.UploadAuth;
                let uploadAddress = data.UploadAddress;
                let videoId = data.VideoId;
                self.videoId = data.VideoId;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)                
              })
              self.statusText = '文件开始上传...'
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {
            // self.getVideo();
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            self.statusText = '文件上传成功!'
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上传中...'
          },
        })
        return uploader
      },
      // async getVideo() {
      //   var res = await this.$post("/api/admin/upload/getVideo", {video_id: this.videoId});
      //   if (res && res.status === 1) {
      //     console.log(res);
      //     // this.videoUrl = res.data;
      //   }
      // }
      async submitVod() {
        var data = this.vodForm;
        data.video_id = this.videoId;
        data.id = this.$route.query.id;
        var res = await this.$post("/api/admin/sale/updateVideo", data);
        if (res && res.status === 1) {
          this.$message.success('更新成功')
        }else{
          this.$message.error('更新失败')
        }
      },
      async getData() {
        let query = this.$route.query;
        var res = await this.$post("/api/admin/sale/content", {id:query.id});
        if (res && res.status === 1) {
          let data = res.data;
          this.vodForm = {
            title:data.title,
            content:data.content,
            uid:data.uid,
            price:data.price,
            img_icon:data.img,
          };
          this.videoId = data.video_id;
        }
      },

    }
  };
</script>

<style>
  .pform-head{
    text-align: center;
  }
  .pform-body{
    margin: 20px 200px;
  }
  .img-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .img-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .img-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .img {
    width: 270px;
    height: 190px;
    display: block;
  }

  .file-upload {
    width:300px;
  }
</style>