其他分享
首页 > 其他分享> > vue---tinymce粘贴图片【完美解决】

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

作者:互联网

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

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

第一步:配置粘贴【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