v-md-editor 上传图片

上传方法

<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | image"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="500px"
  />
</template>

<script lang="js" setup>
/**文章图片上传*/
const handleUploadImage =async (event, insertImage, files) => {
  for (let i in files) {
   /**
    *由于后端设置的是multipart files，所以在前端要穿对应的格式，header中设置参数即可。
    *new 一个FormData对象，文件列表中的每个文件添加到formData 对象中
    */
    const formData = new FormData();
    formData.append('file', files[i]);
    const res=await uploadFile(formData)
    // 上传成功
    if (res.code === 200) {
      insertImage({
        url: res.data,
        desc: '博客图片',
        width: 'auto',
        height: 'auto',
      });
    } else {
      ElMessage.error(res.msg)
    }
  }
}
</script>

Upload.js

/**
 * 上传图片接口
 * */
export function uploadFile(file) {
    return http({
        url: `/api/admin/file/upload`,
        method: 'POST',
        headers:{'Content-Type':'multipart/form-data;charset=utf-8'},
        data:file
    })
}

效果

时间：2024年3月3号晚上