配置图片&文件上传接口

单文件上传

用户点击上传图片、上传word、上传pdf等【工具栏】，或者把文件拖拽到编辑区进行上传，或者在外部ctrl+C复制图片在cherry 编辑区 ctrl+V粘贴图片，都会调用用户定义的上传文件接口进行文件上传操作（如果没有配置该接口，上传图片会以base64格式展示）

第一步需要定义一个上传接口，demo如下：

/**
 * 上传文件函数
 * @param file 上传文件的文件对象
 * @param callback 回调函数，回调函数接收两个参数，第一个参数为文件上传后的url，第二个参数可选，为额外配置信息
 */
function myFileUpload(file, callback) {
    // 先把文件上传到服务端，上传文件的具体代码需要自行实现
    putFile(file, function(err, url) {
        if (err) {
            // 上传失败
        } else {
            callback(url);
        }
    });
}

第二步，将上传文件的函数配置到cherry上，demo如下：

new Cherry({
    id: 'markdown-container', 
    value: '## hello world', 
    fileUpload: myFileUpload,
});

当然，我们还可以有更精细化的控制，比如我们希望上传的视频可以有封面、上传的图片自动带上width=60%的样式，demo如下：

/**
 * 上传文件函数
 * @param file 上传文件的文件对象
 * @param callback 回调函数，回调函数接收两个参数，第一个参数为文件上传后的url，第二个参数可选，为额外配置信息
 */
function myFileUpload(file, callback) {
    // 先把文件上传到服务端，上传文件的具体代码需要自行实现
    putFile(file, function(err, url, file) {
        if (err) {
            // 上传失败
        } else {
            // 如果上传的是视频
            if (/video/i.test(file.type)) {
                callback(url, {
                name: '视频',
                poster: `${url}?poster=true`, // 视频的封面图片url
                isBorder: true, // 是否显示边框，默认false
                isShadow: true, // 是否显示阴影，默认false
                isRadius: true, // 是否显示圆角，默认false
                });
            } else if (/image/i.test(file.type)) {
                // 如果上传的是图片
                callback(url, {
                    name: '图片',
                    isBorder: true, // 是否显示边框，默认false
                    isShadow: true, // 是否显示阴影，默认false
                    isRadius: true, // 是否显示圆角，默认false
                    width: '60%', // 图片的宽度，默认100%，可配置百分比，也可配置像素值
                    height: 'auto', // 图片的高度，默认auto
                });
            } else {
                // 如果上传的是文件
                callback(url);
            }
        }
    });
}

anyway，目前我们已完成了cherry的主要配置，现在用户可以在你的服务上书写Markdown，并且上传图片了。

多文件上传

该功能只在v0.8.46及以后版本中支持

点击插入图片、视频、word等工具栏时，可以选择多文件上传（需要先打开多文件上传的配置）。多文件上传时会调用多文件上传专用的接口。

第一步，打开多文件上传配置

new Cherry({
    id: 'markdown-container', 
    value: '## hello world', 
    /**
     * 上传文件的时候用来指定文件类型
     */
    fileTypeLimitMap: {
      video: 'video/*',
      audio: 'audio/*',
      image: 'image/*',
      word: '.doc,.docx',
      pdf: '.pdf',
      file: '*',
    },
    /**
     * 上传文件的时候是否开启多选
     */
    multipleFileSelection: {
      video: true,
      audio: true,
      image: true,
      word: false,
      pdf: false,
      file: false,
    },
});

第二步，配置多文件上传接口

function fileUploadMulti(files, callback) {
  const fileType = files[0].type;
  const promises = [];
  for (const file of files) {
    const promise = new Promise((resolve) => {
      if (/video/i.test(fileType)) {
        resolve({
          url: 'images/demo-dog.png',
          params: {
            name: `${file.name.replace(/\.[^.]+$/, '')}`,
            poster: 'images/demo-dog.png?poster=true',
            isBorder: true,
            isShadow: true,
            isRadius: true,
          },
        });
      } else if (/image/i.test(fileType)) {
        // 如果上传的是图片，则默认回显base64内容（因为没有图床）
        // 创建 FileReader 对象
        const reader = new FileReader();
        // 读取文件内容
        reader.onload = (event) => {
          // 获取 base64 内容
          const base64Content = event.target.result;
          resolve({
            url: base64Content,
            params: {
              name: `${file.name.replace(/\.[^.]+$/, '')}`,
              isShadow: true,
              width: '60%',
              height: 'auto',
            },
          });
        };
        reader.readAsDataURL(file);
      } else if (/audio/i.test(fileType)) {
        resolve({
          url: 'images/demo-dog.png',
          params: {
            name: `${file.name.replace(/\.[^.]+$/, '')}`,
            poster: 'images/demo-dog.png?poster=true',
            isBorder: true,
            isShadow: true,
            isRadius: true,
          },
        });
      } else {
        resolve('images/demo-dog.png');
      }
    });
    promises.push(promise);
  }
  Promise.all(promises).then((results) => {
    callback(results);
  });
}

第三步，将多文件上传接口配置到cherry里

new Cherry({
    id: 'markdown-container', 
    value: '## hello world', 
    /**
     * 上传文件的时候用来指定文件类型
     */
    fileTypeLimitMap: {
      video: 'video/*',
      audio: 'audio/*',
      image: 'image/*',
      word: '.doc,.docx',
      pdf: '.pdf',
      file: '*',
    },
    /**
     * 上传文件的时候是否开启多选
     */
    multipleFileSelection: {
      video: true,
      audio: true,
      image: true,
      word: false,
      pdf: false,
      file: false,
    },
    callback:{
      fileUploadMulti: fileUploadMulti,
    },
});