Vditor自定义上传图片

Thu, 02 Feb 2023 20:50:04 +0800

场景流程

前端上传一张图片到服务端，服务端返回图片链接，前端进行展示。

官方文档

1、服务端接口一次只接受一张图片

upload: {
        url: '/api/uploadFile', // 上传url
        accept: 'image/jpeg,image/png,image/gif,image/jpg,image/bmp', // 图片格式
        max: 2 * 1024 * 1024,  // 控制大小
        multiple: false, // 是否允许批量上传
        fieldName: 'file', // 上传字段名称
        // 文件名安全处理
        filename(name) {
          return name
            .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
            .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
            .replace('/\\s/g', '');
        },
        // 数据转换
        format(files, responseText) {
          const res = JSON.parse(responseText);
          const name = files[0].name;
          const url = res.uplaodRes;
          const result = JSON.stringify({
            code: 0,
            data: { errFiles: '', succMap: { [name]: url } },
          });
          return result;
        },
      },

2、需要允许同时上传多张图片

（说明：此处服务端接口没有做修改，只能遍历上传）

Markdown编辑器 on 软件开发大郭的技术博客

Vditor自定义上传图片

场景流程

官方文档

1、服务端接口一次只接受一张图片

2、需要允许同时上传多张图片