添加 upload.renderLinkDest 用于扩展粘贴时图片链接的处理

[HengCC]

你在什么场景下需要该功能？

现在linkToImgUrl如果要做上传图床就只能靠后端上传. 希望能够在前端完成这个上传动作. 不然也要占用后端服务的带宽.

描述最优的解决方案

我觉得可以考虑让linkToImgUrl变成一个function, 签名为async (param:{url:string})=>Promise 同时让在调用该链接上传的时候携带extraData中的信息就可以解决这个问题了. 我的思路很简单. 下面伪代码:

linkToImgUrl: async (url)=>{
    const file = await getImage(url,"customName");
    const token = await getToken();
    vditor.options.upload.extraData={
        file,
        token
    }
    return  "uploadUrl";
}

export async function getImage(url: string, imageName: string) {
  return new Promise((resolve) => {
    let blob = null;
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      if (xhr.status === 200) {
        blob = xhr.response;
        const imgFile = new File([blob], imageName);
        resolve(imgFile)
      }
    };
    xhr.send();
  });
}

描述候选解决方案

其他信息

[Vanessa219]

可以传入 URL ，然后配合 setHeaders 使用

[HengCC]

可以传入 URL ，然后配合 setHeaders 使用

你是说在setHeaders 中修改extraData吗? 但是setHeaders也不支持异步. 如果要异步获取上传token怎么办呢?

[HengCC]

另外就是刚刚测试当粘贴图片的时候 setheader也不会触发的 感觉还是要有一个异步机制才行啊

[HengCC]

vditor/src/ts/util/fixBrowserBehavior.ts

Line 1287 in 87d5f2a

xhr.open("POST", vditor.options.upload.linkToImgUrl);

vditor/src/ts/upload/setHeaders.ts

Line 3 in 87d5f2a

vditor.options.upload.headers = vditor.options.upload.setHeaders();

2个位置都是同步调用的. 而且上传的token也是动态获取的呀. 帮看看 还有什么办法能解决吗? @Vanessa219

最终发送的也是URL- - . 或者干脆弄个自定义的handler. 或者和普通上传的handler能不能合并...

vditor/src/ts/util/fixBrowserBehavior.ts

Line 1334 in 87d5f2a

xhr.send(JSON.stringify({url: src}));

看了其他几个issue. 也有类似的情况. 看来不是我一个遇到这样的困惑. 粘贴网络图片还是有必要单独弄一个handler的.

其实普通的文件上传在前端完成上传也是利用了files的promise特性.

 file: async (files: File[]) => {
            const result = await getUploadToken();
            if (result.success) {
              if (editor.vditor.options.upload) {
                const tokens = result.data?.tokens || [];
                editor.vditor.options.upload.extraData = {
                  key: tokens[0].key || '',
                  token: tokens[0].token || '',
                  'x:url': result.data?.url || '',
                };
              }
            }
            return files;
          },

这样执行后, 配合format就能完成前端上传. 但是这个方式对于网络粘贴的图不生效.~

[Vanessa219]

可以传入 URL ，然后配合 setHeaders 使用

你是说在setHeaders 中修改extraData吗? 但是setHeaders也不支持异步. 如果要异步获取上传token怎么办呢?

把动态获取的方法写在 options.upload.setHeaders() 中，当粘贴有链接的内容是就会触发其执行

[ColinLQ]

同样希望能支持自定义功能，现有功能无法很好的满足复杂场景，比如 发送参数不自定义，返回相应必须 200，很大程度限制了复杂场景的自由度

[Vanessa219]

参数可以自定义的，200 这个是规范。

[ColinLQ]

参数可以自定义的，200 这个是规范。

参数我看源码里面是写死了只有url 这一个，没看到有哪里可以自定义
除了 200 还有 201 也是有可能的，通常 200 - 300 之间都是成功的状态，而非只有 200