js如何通过对象上传文件 (js如何实现文件上传功能)

我们在使用别人的网络图片时想将其保存到自己的服务器,又不想将其*载下**下来再上传,这时候怎么办呢? 最简单的方法就是,将链接通过canvas保存为file对象;然后上传到我们自己的服务器上去

将图片链接生成渲染到canvas然后转为base64

如图:

js默认上传文件路径,怎样在js中上传图片或者文件

大家也可以复制以下代码:

imgToBase64(url,type){
    return new Promise((resolve, reject)=>{
      let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
      img = new Image;
      
      img.crossOrigin = 'Anonymous';
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
        const dataURL = canvas.toDataURL('image/jpeg',0.92);
        resolve(dataURL);
        canvas = null;
      };
      img.onerror = e=>{
        reject(e);
      }
      img.src = url;
    })
  },

将base64转为file对象

如图:

js默认上传文件路径,怎样在js中上传图片或者文件

  base64toFile(base, filename){
    var arr = base.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var suffix = mime.split("/")[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    //转换成file对象
    return new File([u8arr], `${filename}.${suffix}`, { type: mime });
  },

最后

调用以上两个方法即可实现图片链接转为file对象;实测有效,我亲测几百张图片都是没有任何问题的;大家可以放心使用;自己也做一个小小的记录;如果大家有更好的方法,也可以分享出来哦!