vite+vue3+tinymce实现单图上传和多图上传到阿里云oss

如何安装tinymce可以参考：在vuecli3.0+中使用tinymce及实现多图上传，文件上传，公式编辑等功能 - huihuihero - 博客园我改的是交互的部分，重点部分记录下来，便日后复查。1、多图上传是依赖于多图上传的，所以单图上传很重要，我是上传到阿里云ossimages_upload_handler: (blobInfo, success, failure) => {//

deng_zhihao692817

1709人浏览 · 2022-05-31 11:34:26

deng_zhihao692817 · 2022-05-31 11:34:26 发布

如何安装tinymce可以参考：在vuecli3.0+中使用tinymce及实现多图上传，文件上传，公式编辑等功能 - huihuihero - 博客园

我改的是交互的部分，重点部分记录下来，便日后复查。

1、多图上传是依赖于多图上传的，所以单图上传很重要，我是上传到阿里云oss

                images_upload_handler: (blobInfo, success, failure) => {
                    //console.log(blobInfo);
                    if (blobInfo.blob().size/1024/1024>2) {
                        failure("上传失败，图片大小请控制在 2M 以内")
                    } else {
                        let formData = new FormData()
                        //formData.append("imgData", blobInfo.base64());
                        formData.append("name", blobInfo.blob().name);
                        formData.append("size", blobInfo.blob().size);
                        formData.append("type", blobInfo.blob().type);
                        formData.append('file', blobInfo.blob());//, blobInfo.filename()
                        // console.log(blobInfo.blob());
                        this.$api.unloadImg(formData).then(res => {
                            success(res)
                        }).catch(() => {
                            failure('上传出错,服务器开小差了呢')
                        })    
                    }
                }

api地址是：

unloadImg(data) {
        return request({
            url: '/admin/a/upload',//'/admin/a/unloadimg',
            method: 'post',
            data,
        })
    }

多图上传的，跟参考的网址是有差别的

地址是：两种方式都行

import '/public/tinymce/axupimgs/plugin'  //多图上传

不用添加index.js, 这是我的理解啊。加了就报错

最后很重要的一点

var baseURL = tinymce.baseURL;
var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';

这里是改成自己项目的ip和端口地址

比如我的：

var baseURL = 'http://localhost:3000';//这里是该项目的ip地址
	
var iframe1 = baseURL+'/public/tinymce/axupimgs/upfiles.html';

在本地的话可以正常使用。

但是如果到了打包部署到线上，

这里就要修改，比如打包后的，是没有了public文件夹了

所以要修改成

var baseURL = window.location.origin; //'http://localhost:3000';//这里是该项目的ip地址
	
//本地的数据是 /public/tinymce/.....======>'/public/tinymce/axupimgs/upfiles.html';
//打包后部署到线上的路径是xxx.com/tinymce/....=======> '/tinymce/axupimgs/upfiles.html';
var iframe1 = baseURL+'/tinymce/axupimgs/upfiles.html';

这些是要注意的地方。

后面发现这种方式在本地也能上传了