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

背景

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>
</template>

<script>
export default {
  components: { Editor, Toolbar },
  setup() {
    const editorConfig = { placeholder: '请输入内容...' } #####
    return {
      editorRef,
      valueHtml,
      editorConfig
    };
  }
}
</script>    

#####根据标注的内容可以发现我们只要在这个editorConfig配置里添加上传文件的相关配置就行，那可配置的属性就继续从官方文档找了。

wangEditor上传图片文档里提供了详细的上传图片相关可用配置项，由官方给的配置项可以知道我们只需要给上面的editorConfig中添加MENU_CONF属性，就可以实现配置上传文件了。

MENU_CONF['uploadImage']是js的另一种访问对象属性的方法，等同于MENU_CONF.uploadImage

editorConfig.MENU_CONF['uploadImage'] = {
--------------------------------------------------------常用配置项
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'your-custom-name',
    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    meta: {
        token: 'xxx',
        otherKey: 'yyy'
    },
    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,
    // 自定义增加 http  header
    headers: {
        Accept: 'text/x-json',
        otherKey: 'xxx'
    },
    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
---------------------------------------------------常用回调函数
    // 上传之前触发
    onBeforeUpload(file: File) { // TS 语法
    // onBeforeUpload(file) {    // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file

        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress: number) {  // TS 语法
    // onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file: File, res: any) {  // TS 语法
    // onSuccess(file, res) {          // JS 语法
        console.log(`${file.name} 上传成功`, res)
    },
    // 单个文件上传失败
    onFailed(file: File, res: any) {   // TS 语法
    // onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
    },
    // 上传错误，或者触发 timeout 超时
    onError(file: File, err: any, res: any) {  // TS 语法
    // onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
    },
}