vue-tinymce的使用，粘贴文件上传，自定义文件上传，改base64转换成上传到服务器返回url

vue-tinymce的使用，粘贴文件上传，自定义文件上传，改base64转换成上传到服务器返回url

vue中使用

<vue-tinymce
  v-model="itemForm.content"
  :setting="setting"
/>

<script>
export default {
	data(){
		return {
			itemForm: {
				content: ''
			},
			setting: {
			        menubar: false,
			        relative_urls: false,
			        remove_script_host: false,
			        paste_data_images: true, // 允许粘贴图片
			        // powerpaste_allow_local_images: true,
			        // powerpaste_word_import: 'propmt', // 只支持office，不支持wps 允许粘贴word图片 参数可以是propmt, merge, clear，效果自行切换对比
			        document_base_url: STATIC_URL,
			        toolbar:
			          'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
			        toolbar_drawer: 'sliding',
			        quickbars_selection_toolbar:
			          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
			        plugins: 'link image media table lists fullscreen quickbars paste',
			        language: 'zh_CN', // 本地化设置
			        height: 360,
			        width: '100%',
			        resize: 'both',
			        images_upload_base_path: '图片访问域名地址',
			        images_upload_handler: (blobInfo, success, failure) => tinymceUploadImage(blobInfo, success, failure) // 上传图片base64转换成自定义上传
			      }
			}
		}
}
<script>

utils.js

// 富文本编辑器图片base64 - 改为url上传
export function tinymceUploadImage(blobInfo, success, failure) {
  const formData = new FormData()
  // 服务端接收文件的参数名，文件数据，文件名
  formData.append('upfile', blobInfo.blob(), blobInfo.filename())
  axios({
    method: 'post',
    // 这里是你的上传地址
    url: '/api/upload/image',
    data: formData
  })
    .then((res) => {
      // 接口返回的图片地址
      success(res.Data.msgbox)
    })
    .catch(() => {
      failure('上传失败')
    })
}