vue---tinymce粘贴图片【完美解决】

2022-09-08 11:34:01 阅读：282 来源： 互联网

标签：vue success url formData tinymce --- blobInfo 上传图片

最近在优化一个前端开发框架，做好的系统，存在大量的图片上传，特别是富文本里面的图片，上传多个，很麻烦，运营说如果能够复制粘贴板的图片，就可以截图上传，就很方便了。

考虑到运营小姐姐的需求，我就花了半个小时开发了这样的一个功能。

第一步：配置粘贴【paste】具体配置项

tinymce.init({
  selector: '#tinydemo',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默认是false的，记得要改为true才能粘贴
})

到此，复制图片的功能就已经完成了。

但是，检查代码发现，复制过来的图片，在富文本里面是base64位的，这种不行，需要调整为上传图片，返回图片路径后插入。

第二步：配置图片上传函数

此函数为：images_upload_handler

示例代码：

images_upload_handler(blobInfo, success, failure, progress) {
  progress(0);
  const token = _this.$store.getters.token;
  getToken(token).then(response => {
    const url = response.data.qiniu_url;
    const formData = new FormData();
    formData.append('token', response.data.qiniu_token);
    formData.append('key', response.data.qiniu_key);
    formData.append('file', blobInfo.blob(), url);
    upload(formData).then(() => {
      success(url);
      progress(100);
    })
  }).catch(err => {
    failure('出现未知问题，刷新页面，或者联系程序员')
    console.log(err);
  });
}

结合项目，我的代码：

// 复制粘贴图片 需先上传服务器
images_upload_handler(blobInfo, success, failure, progress){
  // let url = "/uploads/image/20220908/155f0d639c282ecad9b4e21c4b08ce0c.png";
  // success(url);
  // console.log(blobInfo.blob()); // blob对象
  // console.log(blobInfo.base64()); // base64对象
  let that = this;
  let formData = new FormData();
  formData.append('file',blobInfo.blob(),"DX.jpg");
  uploadImg(formData).then(res => {
    let path = imgURL + res.data;
    success(path);
  }).catch(error => {
    that.$message.error('上传图片失败');
  });
}

到此，复制图片上传就完成了。

参考：

https://blog.csdn.net/Jioho_chen/article/details/118252638

打完收工！

标签：vue,success,url,formData,tinymce,---,blobInfo,上传,图片
来源： https://www.cnblogs.com/e0yu/p/16668847.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue---tinymce粘贴图片【完美解决】