tinymce 上传文件

// 文件上传
// file_picker_types: 'file image media', // 指定允许上传的类型
file_picker_types: 'file', // 指定允许上传的类型
file_picker_callback: function(callback, value, meta) {
  console.log(meta.filetype)
  console.log(343434)
  // // 要先模拟出一个input用于上传本地文件
  var input = document.createElement('input')
  input.setAttribute('type', 'file')
  // 你可以给input加accept属性来限制上传的文件类型
  // 例如:input.setAttribute('accept', '.jpg,.png')
  input.setAttribute('accept', '.doc,.docx,.ppt,.pptx,.pdf,.xlsx')
  input.click()
  input.onchange = function() {
    var file = this.files[0]
    console.log(this.files)
    console.log(file)
    console.log(file.name)
    // 下方被注释掉的是官方的一个例子
    // 放到下面给大家参考
    var reader = new FileReader()
    reader.onload = function() {
      console.log(window.tinymce)
      // Note: Now we need to register the blob in TinyMCEs image blob
      // registry. In the next release this part hopefully won't be
      // necessary, as we are looking to handle it internally.
      var id = 'blobid' + (new Date()).getTime()
      var blobCache = window.tinymce.activeEditor.editorUpload.blobCache
      var base64 = reader.result.split(',')[1]
      var blobInfo = blobCache.create(id, file, base64)
      console.log(id)
      console.log(file)
      console.log(base64)
      console.log(file.name)
      console.log(blobInfo)
      console.log(blobInfo.blobUri())
      blobCache.add(blobInfo)

      // call the callback and populate the Title field with the file name
      callback(blobInfo.blobUri(), { text: file.name, title: file.name })
    }
    reader.readAsDataURL(file)
  }
}

方法二,需要和后端程序(发ajax请求)配合使用

// 文件上传
// file_picker_types: 'file image media', // 指定允许上传的类型
file_picker_types: 'file', // 指定允许上传的类型
file_picker_callback: function(callback, value, meta) {
  console.log(meta.filetype)
  console.log(343434)
  // // 要先模拟出一个input用于上传本地文件
  var input = document.createElement('input')
  input.setAttribute('type', 'file')
  // 你可以给input加accept属性来限制上传的文件类型
  // 例如:input.setAttribute('accept', '.jpg,.png')
  input.setAttribute('accept', '.doc,.docx,.ppt,.pptx,.pdf,.xlsx')
  input.click()
  input.onchange = function() {
    var file = this.files[0]

    var xhr, formData
    xhr = new XMLHttpRequest()
    xhr.withCredentials = false
    xhr.open('POST', '/demo/upimg.php')
    xhr.onload = function() {
       var json
       if (xhr.status !== 200) {
         this.$message.error('HTTP Error: ' + xhr.status)
         return
       }
       json = JSON.parse(xhr.responseText)
       if (!json || typeof json.location !== 'string') {
         this.$message.error('Invalid JSON: ' + xhr.responseText)
         return
       }
       callback(json.location)
    }
    formData = new FormData()
    formData.append('file', file, file.name)
    xhr.send(formData)
  }
}

你可能感兴趣的:(tinymce 上传文件)