vue项目中的Tinymce富文本编辑器如何从word中粘贴图片上传到七牛云？

Dear 丶 2023-06-10 04:26 95阅读 0赞

Tinymce富文本编辑器粘贴图片时需要上传到自己的空间中才能被打开。

一、首先需要安装引入七牛云

npm install qiniu-js

var qiniu = require('qiniu-js')
    // or
    import * as qiniu from 'qiniu-js'

二、同时引入客户端生成的token

import {qiniuTokenCreate} from "@/assets/js/qiniu/qiniuTokenCreate"

此处生成token的方法请参考之前的一篇文章：[https://blog.csdn.net/u014445517/article/details/95212636][https_blog.csdn.net_u014445517_article_details_95212636]

三、在window.tinymce.init中添加属性方法：

// 整合七牛上传
            images_upload_handler: (blobInfo, success, failure, progress) => {
              // 这个函数主要处理word中的图片，并自动完成上传；
              let token=qiniuTokenCreate('image') // 前端自动生成的token
              let domain="http://image.i.haierzhongyou.com/" // 下载图片地址
              const file = blobInfo.blob() // 得到图片的file对象；
          
                // 限制上传文件的大小为200M
                if (file.size > 209715200) {
                  const cur_size = Math.floor(file.size * 100 / 1024 / 1024) / 100
                  Message({
                    message: '上传文件大小不得超过200M 当前文件' + cur_size + 'M ',
                    type: 'error',
                    duration: 5 * 1000
                  })
                  console.log('上传文件大小不得超过200M 当前文件' + cur_size + 'M ')
                  return false
                }
              const observer = {
                next: response => {
                  // 上传进度'+Math.floor(response.total.percent)+'%'
                  // total.loaded: number，已上传大小，单位为字节。
                  // total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
                  // total.percent: number，当前上传进度，范围：0～100。
                  
                  console.log('上传成功')
                },
                error: err => {
                  // 上传失败触发
                  failure('出现未知问题，刷新页面，或者联系程序员')
                },
                complete: response => {
                  success(domain + response.key) // 上传成功后，调用success函数传入图片地址
                  let key = response.hash  // 上传文件名
                }
              }
               // 可通过 subscription.unsubscribe() 停止当前文件上传 
              const putExtra = {
                // 文件原文件名
                fname: '',
                // 用来放置自定义变量
                params: {},
                // 用来限制上传文件类型，为 null 时表示不对文件类型限制
                // 限制类型放到数组里,如 mimeType: 
                mimeType: ['image/png', 'image/jpeg', 'image/gif']
              }
              const config = {
                // 是否使用 cdn 加速域名，默认false
                useCdnDomain: true,
                // 上传域名区域,当为 null 或 undefined 时，自动分析上传域名区域
                region: qiniu.region.z0
              }
              /*
                file: Blob 对象，上传的文件
                key: 文件资源名
                token: 上传验证信息，前端通过接口请求后端获得
                config: object
              */
              // 关键代码
              let options = {
                quality: 0.92,
                noCompressIfLarger: true,
                maxWidth: 1000,
                maxHeight: 618
              }
              qiniu.compressImage(file, options).then(data => {
                // data : {
                //   dist: 压缩后输出的 blob 对象，或原始的 file，具体看下面的 options 配置
                //   width: 压缩后的图片宽度
                //   height: 压缩后的图片高度
                // }
                var observable = qiniu.upload(data.dist, observer.complete.key, token,domain, putExtra, config)
                var subscription = observable.subscribe(observer) // 上传开始
              })
            },

最后，复制粘贴word中含图片的文档，查看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

![20191025171405492.png][]

[https_blog.csdn.net_u014445517_article_details_95212636]: https://blog.csdn.net/u014445517/article/details/95212636
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70]: /images/20230531/3bae96aadbad483b965cb029a390c87b.png
[20191025171405492.png]: /images/20230531/ba405e5bf3da4b0a9a7a9468cba61423.png