您的当前位置:首页>全部文章>文章详情

vue2+elementUI+tinymce编辑器上传音频mp3文件

发表于:2023-09-14 18:11:12浏览:343次TAG: #Vue #elementUi #Tinymce

百度收录的 Vue2 + Tinymce 上传视频的文章比较多,但是对于上传音频文件用 <audio 标签播放还是比较难找的,而且找到的没有靠谱的,今天通过研究发现解决起来还是比较简单的,因为官方本来就有方案只是我们没有研究透而已,先看看文件上传的:在添加图片快 images_upload_handler:的后面继续添加

file_picker_callback: (callback, value, meta)=> {
        if (meta.filetype == 'media'){
          var input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute("accept", "video/mp4,video/AVI,video/FLV,video/mpeg,audio/mp3");
          let that = this;
          input.onchange = function(e) {
            let file = this.files[0];
            const loading = that.$loading({
              lock: true,
              text: '正在上传视频...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            });
            setTimeout(() => {
              that.$nextTick(() => {
                document.querySelector(".el-loading-mask").style.zIndex = "99999";
              });
            });
            let ext = file.name.split(".")[1];
            if (
                ext !== "mp4" &&
                ext !== "AVI"&&
                ext !== "FLV"&&
                ext !== "mpeg"&&
                ext !== "mp3"

            ) {
              that.$message.error({message:'上传资源只能是 AVI/FLV/mp4/mpeg/mp3 格式的视频!',duration:5000,customClass:'zZindex'});
              return false;
            }
            // let url = CONSTANT.URL.BASESYS.ADMINUPLOADFILE;
            let param = {
              suffix:ext,   // 文件后缀  png
              contentType:file.type       // 文件类型  image/png
            }
            // console.log('shipin',param)
            //上传接口
            let formdata = new FormData();
            formdata.append('file', file)
            formdata.append('edit', true)
            formdata.append('upload_config_id', that.upload_config_id)

            that.$axios.post('/admin/Upload/upload', formdata).then(res => {
              // console.log(res)
              if(res.status ==200){
                loading.close();
                callback(res.data.data);
              }else {
                loading.close();
                that.$message(res.data.message)
              }
            }).catch( err =>{
              console.log(err)
              that.$message('出错了!');
              loading.close()
            })
          };
          input.click();

        }
      },
      video_template_callback: function(data) {
        let videoUri = encodeURI(data.source);
        return `<p>
                    <span class="mce-object mce-object-video" data-mce-selected="1" data-mce-object="video" data-mce-p-width="100%"
                        data-mce-p-height="auto" data-mce-p-controls="controls" data-mce-p-controlslist="nodownload"
                        data-mce-p-allowfullscreen="true" data-mce-p-src=${data.source}>
                        <video src=${data.source} width="100%" height="auto" controls="controls" controlslist="nodownload">
                        </video>
                    </span>
                 </p>
                 <p style="text-align: left;"></p>`
      },
      audio_template_callback: function(data) {
        return `<audio style="width:100%" controls>
						<source src=${data.source} type=${data.sourcemime}>
						</audio>`;
      },