braft-editor 圖片（媒體庫）上傳至服務器並通過服務器返回鏈接展示

const myUploadFn = (param) => {

  const serverURL = 'http://upload-server'
  const xhr = new XMLHttpRequest
  const fd = new FormData()

  const successFn = (response) => {
    // 假設服務端直接返回文件上傳後的地址
    // 上傳成功後調用param.success並傳入上傳後的文件地址
    param.success({
      url: xhr.responseText,
      meta: {
        id: 'xxx',
        title: 'xxx',
        alt: 'xxx',
        loop: true, // 指定音視頻是否循環播放
        autoPlay: true, // 指定音視頻是否自動播放
        controls: true, // 指定音視頻是否顯示控制欄
        poster: 'http://xxx/xx.png', // 指定視頻播放器的封面
      }
    })
  }

  const progressFn = (event) => {
    // 上傳進度發生變化時調用param.progress
    param.progress(event.loaded / event.total * 100)
  }

  const errorFn = (response) => {
    // 上傳發生錯誤時調用param.error
    param.error({
      msg: 'unable to upload.'
    })
  }

  xhr.upload.addEventListener("progress", progressFn, false)
  xhr.addEventListener("load", successFn, false)
  xhr.addEventListener("error", errorFn, false)
  xhr.addEventListener("abort", errorFn, false)

  fd.append('file', param.file)
  xhr.open('POST', serverURL, true)
  xhr.send(fd)

}

 

<BraftEditor media={{uploadFn: myUploadFn}}/>