WebShare Api 共享文件？答案

【问题标题】：WebShare Api sharing files?WebShare Api 共享文件？
【发布时间】：2020-04-24 05:05:43
【问题描述】：

我想与新的 api 共享图像。如果我有一个文件的上传表单，我可以与 api 共享该文件，但我试图共享一个本地文件会打破我的头。这是我的尝试：

function sharePage(){
const title     = document.title;
var filesArray  = [];
$.get(baseurl+"images/cover.jpg", { async: false }, function(data) { filesArray.push(data); });
setHashtag('share');
if(navigator.share){
    if(navigator.canShare && navigator.canShare({ files: filesArray })) {
        navigator.share({
            text: 'FILE',
            files: filesArray,
            title: title,
            url: baseurl
        });
    }else{
        navigator.share({
            text: 'NO FILE',
            title: title,
            url: baseurl
        });
    }
}else{
    document.location.href="whatsapp://send?text="+baseurl;
}

编辑：问题是，我不知道要为这个脚本实现一个服务器端文件，比如 var file = baseurl+"images/cover.jpg";我尝试使用 jquery $.get 但它不起作用

【问题讨论】：

您需要提供明确的问题陈述。你希望这段代码做什么？它实际上是做什么的？浏览器的调试器中是否显示任何错误消息？您是否在支持 API 的浏览器中进行测试（目前似乎是 Chrome for Android 和 nothing 其他）？
@Quentin 是的，我在我的 android w3c.github.io/web-share/demos/share-files.html 上使用此页面进行了检查，并以这种形式加载图像工作正常。代码来自web.dev/web-share 我想要分享一张图片而不上传，我想从服务器分享一张图片

标签： javascript api file share sharing

【解决方案1】：

我通过请求一个 blob 并生成一个 File 对象来使其工作。像这样的：

fetch("url_to_the_file")
  .then(function(response) {
    return response.blob()
  })
  .then(function(blob) {

    var file = new File([blob], "picture.jpg", {type: 'image/jpeg'});
    var filesArray = [file];

    if(navigator.canShare && navigator.canShare({ files: filesArray })) {
      navigator.share({
        text: 'some_text',
        files: filesArray,
        title: 'some_title',
        url: 'some_url'
      });
    }
  }

【讨论】：

这帮助很大！干杯！

【解决方案2】：

在 TypeScript 中与 async/await 相同（假设您检查了 navigator.share 可用）：

const image = await fetch(imageUrl);
const blob = await image.blob();
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
navigator.share({ text: 'some_text', files: [file] } as ShareData);

【讨论】：

【解决方案3】：

我通过请求一个 blob 并生成一个 File 对象来使其工作。像这样的：

fetch("Url-image-complete")
.then(function(response) {
    return response.blob()
  })
.then(function(blob) {

    var file = new File([blob], "Name-image-whith-extension", {type: 'image/jpeg'});
    var filesArray = [file];
    var shareData = { files: filesArray };


    if (navigator.canShare && navigator.canShare(shareData)) {

    // Adding title afterwards as navigator.canShare just
    // takes files as input
    shareData.title = "Name"

    navigator.share(shareData)
    .then(() => console.log('Share was successful.'))
    .catch((error) => console.log('Sharing failed', error));

    } else {
    console.log("Your system doesn't support sharing files.");
    }
 
});

【讨论】：