le-markdown 配置md拖拽上传图片

11 min read

9015bdd7202a41db94f53561dbe33b9d.png

定义上传的接口类型

imageUploader: {
        custom: true,
        fileType: 'server',
        fileNameType: 'uuid',
        imagePrefix: 'https://cdn.jsdelivr.net/gh/', // 图片前缀地址
      }

配置axios上传选项

//上传图片
async uploadImg($vm, file, fileName) {
  console.log($vm) // 组件对象
  console.log(file) // 文件 file或者是base64串,基于配置
  console.log(fileName) // 文件名 uuid或原文件名 基于配置
  const formData = new FormData();
  const headers = {
    'Content-Type': 'multipart/form-data',
    'Authorization': "Bearer " + getToken(),
  }
  formData.append("file", file)
  let res = await axios.post(process.env.VUE_APP_BASE_API + "/oss", formData, {headers})
  // 添加图片
  // 两个参数 第一个是图片访问路径 第二个是文件名 按照如下类似的方法即可向编辑区插入上传好的图片了
  $vm.insertImg(`${res.data.url}`, fileName)
}