VUE-NEXT-ADMIN为wangEditor在vue3环境中配置上传文件

橘式不妙

于 2023-03-10 11:59:48 发布

阅读量635

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_50849253/article/details/129439730

版权

文章介绍了如何在基于vue3和ts的vue-next-admin后台管理模板中，配置wangEditor编辑器的文件上传功能。关键在于理解wangEditor的官方文档，通过编辑器的editorConfig添加上传配置项，如fieldName、allowedFileTypes、meta等，并设置上传回调函数，如onBeforeUpload、onSuccess、onFailed等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

vue-next-admin后台管理模板是vue3+ts实现的，对于后端开发小白来说需要了解vue和ts的简单语法才能大致看懂。模板的编辑器使用的是wangEditor，所以如何配置编辑器的文件上传配置首先还是要先了解wangEditor官方文档。

解决

参考wangEditor关于Vue3使用的文档

解析

官方文档关键代码片段 #####

<template>
    <div style="border: 1px solid #ccc">
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig" #####
        :mode="mode"
      />
    </div>
</te

最低0.47元/天解锁文章