场景流程

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

官方文档

https://github.com/Vanessa219/vditor

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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、需要允许同时上传多张图片

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

upload: {
        accept: 'image/jpeg,image/png,image/gif,image/jpg,image/bmp', // 图片格式
        max: 2 * 1024 * 1024,  // 控制大小
        multiple: true, // 是否允许批量上传
        fieldName: 'file', // 上传字段名称
        // 文件名安全处理
        filename(name) {
          return name
            .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
            .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
            .replace('/\\s/g', '');
        },
        // 遍历文件上传并展示
       async handler(files) {
          let res;
          for (const file of files) {
            const name = file.name;
            const formData = new FormData();
            formData.append('avatar', file);
            res = await request.post('/api/uploadFile', {
              data: formData,
            });
            crtVditor.current?.insertValue(`![${name}](${res.uplaodRes})`); // 文本编辑器中插入图片
          }
          if (res.uplaodRes) {
            return '上传成功';
          }
          return '上传失败';
        },
      },