vue-ueditor-wrap

<template>
  <div class="upload-container">
    <el-button icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
      上传文章内图片
    </el-button>
    <el-button icon="el-icon-upload" size="mini" type="primary" @click=" vedioVisible=true">
      上传文章内视频
    </el-button>
   <div style="">
     <vue-ueditor-wrap  v-model="desc" :config="myConfig" ></vue-ueditor-wrap>
   </div>

    <el-dialog :visible.sync="dialogVisible">
      <el-upload
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        class="editor-slide-upload"
        :action="uploadApi"
        :headers="headers"
        list-type="picture-card"
        name="image"
        accept=".jpeg,.png,.gif,.ico,.JPEG,.PNG,.GIF,.ICO,"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <div style="text-align: right">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="vedioVisible">
<!--      <el-upload-->
<!--        :multiple="true"-->
<!--        :file-list="fileList"-->
<!--        :show-file-list="true"-->
<!--        :on-remove="handleRemove"-->
<!--        :on-success="handleSuccess"-->
<!--        :before-upload="beforeUpload"-->
<!--        class="editor-slide-upload"-->
<!--        :action="uploadApi"-->
<!--        :headers="headers"-->
<!--        list-type="picture-card"-->
<!--        name="image"-->
<!--        accept=".jpeg,.png,.gif,.ico,.JPEG,.PNG,.GIF,.ICO,"-->
<!--      >-->
<!--        <i class="el-icon-plus"></i>-->
<!--      </el-upload>-->

      <el-upload
        class="upload-demo"
        accept=".mp4"
        name="video"
        :action="uploadVideoApi"
        :headers="headers"
        :before-upload="videoBeforeUpload"
        :on-remove="removeVideo"
        :on-success="uploadVideoSuccess"
      >
        <video :src="form.video" v-if="form.video" controls="controls"></video>
        <el-button  size="small" type="primary">点击上传视频</el-button>
         <div>视频连接地址：{{form.video}}</div>
<!--        <div slot="tip" class="el-upload__tip">建议上传mp4(H.264编码)文件，且不超过15M，支持H5，小程序</div>-->
      </el-upload>

      <div style="text-align: right">
        <el-button @click="closeVedio">
          取消
        </el-button>
        <el-button type="primary" @click="handleSubmitvedio">
          复制视频路径
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getToken} from '@/utils/auth'

  export default {
    name: 'EditorSlideUpload',
    props: {
      descdata: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        uploadApi: process.env.VUE_APP_UPLOAD_API,  // 上传图片api
        headers: {
          Authorization: 'Bearer ' + getToken()
        }, // 认证的头部
        dialogVisible: false,
        listObj: {},
        fileList: [],
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: true,
          // 初始容器高度
           initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: '',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: '/UEditor/'
        },
        desc:"",
        //上传视频
        vedioVisible:false,
        uploadVideoApi: process.env.VUE_APP_UPLOAD_API + "?name=video&type=1", // 上传视频api
        form: {
          video: "",
        },
      }
    },
    watch:{
      descdata(val, oldVal){//普通的watch监听
        if(val !=""){
          this.desc = val
        }
      },
    },
    methods: {
      //视频结束
      closeVedio(){
        this.vedioVisible = false
        this.form.video=""
      },
      // 视频上传前判断是否已经有视频如果有视频则提示只能上传一张
      videoBeforeUpload() {
        if (this.form.video) {
          this.$message({
            type: "error",
            message: "每次只能上传一个视频!",
          });
          return false;
        }
        return true;
      },
      removeVideo(file) {
        if (file && file.status === "success") {
          this.form.video = "";
        }
      },
      uploadVideoSuccess(res) {
        this.form.video = res;

      },
      //视频
      checkAllSuccess() {
        return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
      },
      // handleSubmitvedio(){
      //   // this.desc= this.desc +` <video src="${this.form.video}" preload="meta"  controls="controls"></video>`
      //   // this.desc= this.desc +` <video src="https://fcpro-oss.oss-cn-shanghai.aliyuncs.com/fc_pro/20200908/1599542142441.mp4" preload="meta"  controls="controls"></video>`
      //   this.vedioVisible= false
      // },
      // 复制按钮
      handleSubmitvedio(){
        let data =this.form.video
        if (this.form.video) {
          this.copy(data)
        }else {
          this.$message({
            message: '视频连接为空',
            type: 'error'
          });
        }
      },
      copy(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
        this.vedioVisible= false
      },
      handleSubmit() {
        const arr = Object.keys(this.listObj).map(v => this.listObj[v])
        if (!this.checkAllSuccess()) {
          this.$message('请等待所有图片上传成功。如果有网络问题，请刷新页面并再次上传！')
          return
        }
        const _this = this
        arr.forEach(v => {
          if(_this.desc){
            _this.desc= _this.desc +`<img  src="${v.url}" >`
          }else {
            _this.desc=`<img src="${v.url}" >`
          }
        })

        // this.$emit('successCBK', arr)
        this.listObj = {}
        this.fileList = []
        this.dialogVisible = false
      },
      handleSuccess(response, file) {
        const uid = file.uid
        const objKeyArr = Object.keys(this.listObj)
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (this.listObj[objKeyArr[i]].uid === uid) {
            this.listObj[objKeyArr[i]].url = response;
            this.listObj[objKeyArr[i]].hasSuccess = true
            return
          }
        }
      },
      handleRemove(file) {
        const uid = file.uid
        const objKeyArr = Object.keys(this.listObj)
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (this.listObj[objKeyArr[i]].uid === uid) {
            delete this.listObj[objKeyArr[i]]
            return
          }
        }
      },
      beforeUpload(file) {
        const _self = this
        const _URL = window.URL || window.webkitURL
        const fileName = file.uid
        this.listObj[fileName] = {}
        return new Promise((resolve, reject) => {
          const img = new Image()
          img.src = _URL.createObjectURL(file)
          img.onload = function () {
            _self.listObj[fileName] = {hasSuccess: false, uid: file.uid, width: this.width, height: this.height}
          }
          resolve(true)
        })
      }
    },
    mounted(){
    }
  }
</script>

<style lang="scss" scoped>
  .editor-slide-upload {
    margin-bottom: 20px;

  // /deep/
  .el-upload--picture-card {
    width: 100px;
  }

  }
</style>