如果有图片的base64 或者url,可以用post模拟上传图片吗

dahua1 · 发表于 2022-3-29 15:50:00

本帖最后由 dahua1 于 2022-3-29 16:03 编辑

如果有图片的base64 或者url,可以用post模拟上传图片吗
我找到下面一段代码,但是运行起来,会提示错误,而且是jQuery的,能改成js的吗

var c = document.createElement("canvas");
var cxt=c.getContext("2d");
var img=new Image();
img.setAttribute("crossOrigin",'Anonymous');
img.onload=function(){
var fileIndex=this.src.lastIndexOf("/");
var filename= this.src.substr(fileIndex+1);

c.width = this.width;
c.height = this.height;
cxt.drawImage(img, 0, 0, this.width, this.height) // 在canvas上绘制图片
var dataURL = compress(img,this.width,this.height,0.8);
/*为了兼容ios 需要 dataURL-> blob -> file */
var blob = dataURLtoBlob(dataURL); // dataURL-> blob
var file = blobToFile(blob, filename); // blob -> file
console.log("得到文件："+file);
console.log("压缩后大小："+file.size/1024);

var fd = new FormData();
fd.append("upfile",file  ,filename);
//fd.append("files",file ,filename);
$.ajax({
      //url: 'http://127.0.0.1:8080/base/file/upload',
      url:'https://bbs.tampermonkey.net.cn/misc.php?mod=swfupload&action=swfupload&operation=upload&fid=77',
      type : 'POST',
      dataType : 'json',
      cache : false,
      contentType : false,//（必须这样配置）
      processData : false, //JQuery不处理发送数据
      // contentType : 'multipart/form-data',（如果这样，会导致contentType没有边界boundary，导致文件解析失败，后台报错Could not parse multipart servlet request;）
      data: fd,
      success: function (res) {
         debugger
         if(res.code==0){
            console.log(res.data[0].savePath+'上传成功\n');
         }else{
            console.error(filename+'上传失败\n');
         }
      },error:function(res){
         console.error(filename+'上传失败\n');
      }
})

}

img.src="https://bbs.tampermonkey.net.cn/forum.php?mod=attachment&aid=MjQzMnxkOWNiYTEyN3wxNjQ4NTQwMjAxfDM5NzIxfDE5NjM%3D&noupdate=yes";

function compress(img, width, height, ratio) {
// img可以是dataURL或者图片url
/* 如果宽度大于 750 图片太大等比压缩 */
if(width > 750){
      var ratio = width/height;
      width = 750;
      height = 750/ratio;
}
var canvas, ctx, img64;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;

ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
/* canvas.toDataURL(mimeType（图片的类型）, qualityArgument（图片质量）) */
img64 = canvas.toDataURL("image/jpeg", ratio);

return img64; // 压缩后的base64串
}
//将base64转换为blob
function dataURLtoBlob (dataurl) {
var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//将blob转换为file
function blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}