关于前端:Vue2-使用wangEditor5-上传图片

wangEditor v5 是国内一名优良的开发者开发的富文本编辑器，是一款十分好用的编辑器
官网：wangEditor v5

vue-cli 装置应用请跳官网：vue-cli

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

模板

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

script

<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {components: { Editor, Toolbar},
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: {placeholder: '请输出内容...'},
            mode: 'default', // or 'simple'
        }
    },
    methods: {onCreated(editor) {this.editor = Object.seal(editor) // 肯定要用 Object.seal()，否则会报错},
    },
    mounted() {
        // 模仿 ajax 申请，异步渲染编辑器
        setTimeout(() => {this.html = '<p> 模仿 Ajax 异步设置内容 HTML</p>'}, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器}
}
</script>

css

<style src="@wangeditor/editor/dist/css/style.css"></style>

到这就能够失常应用了，接下来教大家怎么上传图片和视频

咱们先看一下文档对于上传图片和视频的阐明
上传图片和视频配置必须在 uploadImage 里进行配置

editorConfig.MENU_CONF['uploadImage'] = {// 上传图片的配置}

间接给大家看我怎么配置的，间接在 data 里的 editorConfig.MENU_CONF 进行配置

   editorConfig: {
        placeholder: '请输出内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            server: '/api/blade-resource/fileSystem/fileUpload',
            fieldName: 'file',
            // 单个文件的最大体积限度，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 抉择文件时的类型限度，默认为 ['image/*']。如不想限度，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被增加到 formData 中，一起上传到服务端。meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义减少 http  header
            headers: {
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie，默认为 false
            withCredentials: true,

            // 超时工夫，默认为 10 秒
            timeout: 10 * 1000, //10 秒

            // 上传前
            onBeforeUpload(files) {
              Message({
                message: '图片正在上传中, 请急躁期待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致 onSuccess 与 onFailed 回调函数不起作用, 本人手动解决
              // 先敞开期待的 Message
              Message.closeAll();
              if (res.code === 200) {
                Message.success({message: `${res.data.originalName} 上传胜利 `
                });
              } else {
                Message.error({message: `${res.data.originalName} 上传失败，请从新尝试 `
                });
              }
              insertFn(res.data.link, res.data.name, res.data.link);
            },

            // 单个文件上传胜利之后
            onSuccess(file, res) {console.log(`${file.name} 上传胜利 `, res);
            },

            // 单个文件上传失败
            onFailed(file, res) {console.log(`${file.name} 上传失败 `, res);
            },

            // 上传进度的回调函数
            onProgress(progress) {console.log('progress', progress);
              // progress 是 0-100 的数字
            },

            // 上传谬误，或者触发 timeout 超时
            onError(file, err, res) {console.log(`${file.name} 上传出错 `, err, res);
            }
          },
          // 视频上传
          uploadVideo: {
            fieldName: 'file',
            server: '/api/blade-resource/fileSystem/fileUpload',

            // 单个文件的最大体积限度，默认为 10M
            maxFileSize: 50 * 1024 * 1024, // 50M

            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,
            // 抉择文件时的类型限度，默认为 ['video/*']。如不想限度，则设置为 []
            allowedFileTypes: ['video/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被增加到 formData 中，一起上传到服务端。meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义减少 http  header
            headers: {
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie，默认为 false
            withCredentials: true,

            // 超时工夫，默认为 30 秒
            timeout: 1000 * 1000, // 1000 秒,
            // 上传之前触发
            onBeforeUpload(file) {
              Message({
                message: '视频正在上传中, 请急躁期待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return file;
            },
            // 自定义插入视频
            customInsert(res, insertFn) {
              // 因为自定义插入导致 onSuccess 与 onFailed 回调函数不起作用, 本人手动解决
              // 先敞开期待的 Message
              Message.closeAll();
              if (res.code === 200) {
                Message.success({message: `${res.data.originalName} 上传胜利 `
                });
              } else {
                Message.error({message: `${res.data.originalName} 上传失败，请从新尝试 `
                });
              }
              insertFn(res.data.link, res.data.link);
            },
            // 上传进度的回调函数
            onProgress(progress) {console.log(progress);
              // onProgress(progress) {       // JS 语法
              // progress 是 0-100 的数字
            },

            // // 单个文件上传胜利之后
            // onSuccess(file, res) {//   console.log(`${file.name} 上传胜利 `, res);
            //   this.successMsg(file);
            // },

            // // 单个文件上传失败
            // onFailed(file, res) {//   console.log(`${file.name} 上传失败 `, res);
            //   this.errorMsg(file);
            // },

            // 上传谬误，或者触发 timeout 超时
            onError(file, err, res) {console.log(`${file.name} 上传出错 `, err, res);
              Notification.error({
                title: '谬误',
                message: `${file.name} 上传失败，请从新尝试 `
              });
            }
          }
        }
      },

其中最要害的一步就是自定义插入，官网文档形容：

也就是说如果后端返回来的格局与富文本要求的格局无奈统一，能够应用自定义插入来插入图片和视频，因为这里有一个小问题，应用自定义插入会导致 onSuccess 与 onFailed 回调函数不起作用，我便本人在 customInsert 进行解决，这个问题我曾经反馈给作者，置信很快解决，各位小伙伴应用自定义插入的时候能够先看看回调函数是否起作用，如果有，能够把下面 customInsert 外面对于回调的解决去掉

上传本地图片

复制网络照片间接粘贴编辑器里

上传本地视频

关于前端:Vue2-使用wangEditor5-上传图片

wangEditor v5

vue2-cli 应用 wangEditor v5

装置：

应用

上传图片与视频

后果