wangeditor vue2 上传图片完整功能

    import '@wangeditor/editor/dist/css/style.css' // 富文本编辑器样式
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
    import { DomEditor } from '@wangeditor/editor'
	<el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="正文" prop="content">
                            <div class="page-layer editor-outer">
                                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
                                <Editor style="height: 400px; overflow-y: hidden;" v-model="formLabelAlign.content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                            </div>
                            <!-- <el-input size="small" :rows="4" type="textarea" resize="none" v-model="formLabelAlign.content" placeholder="请输入"></el-input> -->
                        </el-form-item>
                    </el-col>
                </el-row>
 data() {
            return {
                editor: null,
                toolbarConfig: {
                //隐藏上传视频功能  暂时没研究。
                    excludeKeys: [
                        'insertVideo',
                        'uploadVideo',
                        'group-video'
                    ]
                },
                editorConfig: { 
                    placeholder: '请输入内容',
                      MENU_CONF: {
                        uploadImage: {
                            // server:放自己公司后端提供的图片上传接口
                            server: (process.env.NODE_ENV == 'development' ? config.serviceUrlDev  : config.serviceUrlProd )+'control/file/uploadFile',
                            // fieldName:自己公司和后端共同约定好的接收图片接口参数名
                            fieldName: 'file',
                            // 空就是所有类型
                            allowedFileTypes:['image/*'],
                            // 拼接参数到地址上
                            metaWithUrl: true,
                            // 文件大小
                            maxFileSize: 10 * 1024 * 1024,
                            // 请求头
                            headers: { Authorization: this.getToken() },
                            //  // 上传前
                            // 上传进度的回调函数
							onProgress(progress) {
								console.log('onProgress', progress)
							},
                            onBeforeUpload(file) {
                                console.log(file)
                                //     // file 选中的文件,格式如 { key: file }
                                // let canuseFile =['jpg', 'jpeg', 'png', 'gif'];
                                //     let arr = file.name.split('.');
                                //     let istrue = canuseFile.indexOf(arr[arr.length - 1]);
                                //     if (istrue == -1) {
                                //         this.$message.warning('错误!文件格式不支持')
                                //         return false
                                //     }else{
                                //         return true
                                //     }
                                },
                           
							 // 单个文件上传成功之后
							onSuccess(file, res) {
                                // insertFn(result.data)
								console.log('onSuccess', file.url, res)
                            //    let  fileUrl=process.env.NODE_ENV == 'development' ? config.serviceUrlDev + config.fileService : config.serviceUrlProd + config.fileService;
                                 
                            //     let path=fileUrl+res.data;
                            //     console.log(path)
                            //     insertFn(path)
                                // this.$notify({
                                //     title: '操作成功',
                                //     message: '上传成功',
                                //     type: 'success',
                                //     duration: 1000,
                                //     position: 'top-left',
                                // });
							},
							// 单个文件上传失败
							onFailed(file, res) {
								// console.log('onFailed', file, res)
                                 this.$notify({
                                    title: '操作失败',
                                    message: '上传失败',
                                    type: 'warning',
                                    duration: 1000,
                                    position: 'top-left',
                                });
							},
							// 上传错误,或者触发 timeout 超时
							onError(file, err, res) {
								// alert(err.message)
								// console.error('onError', file, err, res)
                                this.$notify({
                                    title: '操作失败',
                                    message: '上传失败',
                                    type: 'warning',
                                    duration: 1000,
                                    position: 'top-left',
                                });
							},
							//重点是此方法
                            customInsert( result, insertFn) {
                                // result是返回的json格式
                                // 从 result 中找到 url alt href ,然后插图图片
                                console.log(result.data)
                                //我这里后端返回的不是完整地址所以需要拼接一下
                                let  fileUrl=process.env.NODE_ENV == 'development' ? config.serviceUrlDev + config.fileService : config.serviceUrlProd + config.fileService;
                                let path=fileUrl+result.data;
                                //把完整地址穿进去
                                insertFn(path)
                            }
                        },
                      }
                },
                mode: 'default', // or 'simple'
        },
methods:{
 onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
                //  this.toolbarConfig = {
                //     excludeKeys: [
                //         'insertVideo',
                //         'uploadVideo',
                //         'group-video'
                //     ]
                // }
            },   
            getToken(){
                let token=null;
                //  let token = sessionStorage.getItem('token');
                if (sessionStorage.getItem('info')) {
                    token = JSON.parse(sessionStorage.getItem('info')).token;
                }
                return token;
            },
},

你可能感兴趣的:(javascript,开发语言,ecmascript)