上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]

该用户从未签到

5

主题

19

回帖

47

积分

助理工程师

积分
47
发表于 2022-3-29 15:50:00 | 显示全部楼层 | 阅读模式
悬赏1油猫币已解决
本帖最后由 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;
}


1.jpg

最佳答案

查看完整内容

如果有图片的base64 或者url,可以用post模拟上传图片吗 当然可以,base64和图片可以互转,如果位置需要图片数据的话,吧base64转为图片就好了,用formData。 url也同理,先用ajax下载了图片 具体源码的话,哥哥可以贴个网站啥的看看
  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-3-29 15:50:01 | 显示全部楼层
    如果有图片的base64 或者url,可以用post模拟上传图片吗

    当然可以,base64和图片可以互转,如果位置需要图片数据的话,吧base64转为图片就好了,用formData。

    url也同理,先用ajax下载了图片

    具体源码的话,哥哥可以贴个网站啥的看看
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    5

    主题

    19

    回帖

    47

    积分

    助理工程师

    积分
    47
    发表于 2022-3-29 16:58:45 | 显示全部楼层
    我是想在网上找到一个图片的url,   用 XMLHttpRequest  来上传这张图片,
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表