Tinymce实现本地文件上传

以下是我的列子(单纯为个人记事本)

initTinymce() {
  const _this = this
  window.tinymce.init({
    selector: `#${this.tinymceId}`,
    language: this.languageTypeList['zh'],
    height: this.height,
    body_class: 'panel-body ',
    object_resizing: false,
    toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
    menubar: this.menubar,
    plugins: plugins,
    end_container_on_empty_block: true,
    powerpaste_word_import: 'clean',
    code_dialog_height: 450,
    code_dialog_width: 1000,
    advlist_bullet_styles: 'square',
    advlist_number_styles: 'default',
    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
    default_link_target: '_blank',
    link_title: false,
    paste_data_images: true,
    nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
    //添加file_picker_type: 'file',
    file_picker_type: 'file',
    //上传文件类型有  file image media三种可选填以逗号或者空格隔开
    file_brower_callback_type: 'file image media',
    //这个为文件上传的回调
    file_picker_callback: function(callback, value, meta) {
      // 文件分类
      var filetype =
        '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
      // 后端接收上传文件的地址
      // var upurl = '/blade-resource/oss/endpoint/put-file-attach'
      // 为不同插件指定文件类型及后端地址
     // switch (meta.filetype) {
       // case 'image':
        //  filetype = '.jpg, .jpeg, .png, .gif'
          // upurl = '/blade-resource/oss/endpoint/put-file-attach'
        //  break
        //case 'media':
         // filetype = '.mp3, .mp4'
          // upurl = '/blade-resource/oss/endpoint/put-file-attach'
          //break
       // case 'file':
       // default:
     // }
     (以上备注没删,有些时候可根据类型调用接口,一般都是要发请求根据upurl不同上传不同,我这里上传附件都是一个接口所以注释掉)
     //以下是原生上传文件
      var input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.setAttribute('accept', filetype)
      input.click()
      input.onchange = function() {
      //创建一个表格把点击上传的文件放进FormData
        var formData = new FormData()
        const file = input.files[0]
        formData.append('file', file, file.name)
        //upload是我自己在api那边封好的一个接口,在这边调用
        upload(formData).then((res) => {
        //接口返回上传文件的路径就可以在tinymce里面看到了
          callback(res.data.link, { text: res.data.link })
        })
      }
    },
   //这个是图片上传的方法(刚刚的是文件包括视频图片,这个只是图片上传)
    // images_upload_handler(blobInfo, success, failure, progress) {
    //   progress(0)
    //   console.log(blobInfo)
    //   const formData = new FormData()
    //   formData.append('file', blobInfo.blob())
    //   console.log('formData', formData)
    //   upload(formData)
    //     .then((res) => {
    //       console.log(res)
    //       success(res.data.link)
    //       progress(100)
    //     })
    //     // })
    //     .catch((err) => {
    //       failure('上传出错')
    //       console.log(err)
    //     })
    // }
  })
},

//这个是common.js
// 图片  上传
export function upload(data) {
return request({
url: '/blade-resource/oss/endpoint/put-file-attach',
method: 'post',
headers: {
  Authorization: `Basic ${Base64.encode(
    `${website.clientId}:${website.clientSecret}`
  )}`,
  [website.tokenHeader]: 'bearer ' + getToken()
},
data
})
}