vue3使用wangEditor-v5学习笔记(二)上传视频图片

按照官方的说法

上传图片的配置比较复杂，拆分为几个部分来讲解。

的确如果自定义上传是比较复杂，服务端还要适配，这里我用的阿里云的OSS，就方便很多，我也强烈建议大家购买一下阿里云oos，价格便宜，而且功能性非常强可以自定义水印、图片缩放、压缩等等，而且api使用非常方便。

首先，定义editerConfig，MENU_CONF属性非常重要，之后配置都需要使用它。

const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }

然后MENU_COFG加上以下即可

editorConfig.MENU_CONF['uploadImage'] = {
    async customUpload(file, insertFn) {
        const {
            filePath
        } = createFileUploadPath('articleimage', file)

    client.put(filePath, file) // 上传到OSS
        .then((res) => {
            insertFn(res.url)
        }).catch((err) => {
            console.log(err)
        })
    },
}

customUpload函数的参数file，打印出来具有以下属性

createFileUploadPath是我自定义的一个函数，主要是获取上传目录和获得文件扩展名

// 根据选择的文件，拼凑上传最终路径
const createFileUploadPath = (dir, file) => {
    // 文件扩展名
    const fileExt = file.name.split('.')[1]
    const date = new Date()
    return {
        filePath: `${dir}/${date.getFullYear()}/${date.getMonth() + 1}/${random(12)}.${fileExt}`,
        fileExt
    }
}

至于上传视频也是非常简单，只需要将MENU_CONF['uploadImage']改成MENU_CONF['uploadvideo']即可。

最终效果如下

好了，接下我们该下一步了，添加查看源码功能