如何将 img 标签的里的文件上传？

Posted 2022-10-29

有一个下面这样的标签：

<img style="width:40%" id="bimg" src="../img/barcode.png"/>

 如何将文件图片上传那？

 我们先看下传统上传文件：

//上传文件
        function upload_FileInfo()
            let formData = new FormData();
            formData.append("file", document.getElementById(file_1).files[0]);
            let url=sensorServer.getUploadFileUrl();
            $.ajax(
                url:url,
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data)
                    console.log(JSON.stringify(data));
                    if(data.msg=="操作成功"&&data.data!=null)
                        let uploadSuccessPath=data.data;
                        let postSData="appkey":"cad_background","appval":data.data;
                        let resultCount=sensorServer.updateSettingsInfo(postSData);
                        if(resultCount==1) 
                            layer.msg("上传成功！");
                        else
                            layer.msg("保存失败！");
                        
                    else
                        alert(JSON.stringify(data));
                        layer.msg("上传失败！");
                    
                ,
                error:function(e)
                    alert("错误！！");

                
            );
        

传统文件上传只需要做个获取file的 文件即可。那么img标签怎么做那？

继续看下去： 

 只需要将文件做个转换即可。

let imagesName=new Date().getUTCMinutes()+".png";
        let fileData=document.getElementById(image1);
        let fileOfBlob=dataURLtoFile(fileData.src,imagesName);

        formData.append("file",fileOfBlob);

function dataURLtoFile(dataurl, filename) 
    //获取代码请加微信
    //这种方式电脑可以。手机不可以。

这样就可以上传文件了；

但是经过测试后发现，电脑可以手机不可以怎么办？只要更改下获取base64就可以了。

//上传文件
            function upload_FileInfo()
                let formData = new FormData();
          
          let imagesName=new Date().getUTCMinutes()+".png";
          let fileData=document.getElementById(bimg);
          let base64=""; //getBase64Image(fileData);
          
          //回调调用 -huochengyan
          toDataURL(fileData.src, function(dataUrl) 
            console.log(RESULT:, dataUrl);
            base64=dataUrl;
            let fileOfBlob=dataURLtoFile(base64,imagesName);
              formData.append("file",fileOfBlob);
                //formData.append("file", document.getElementById(file_1).files[0]);
                let url=sensorServer.getUploadFileUrl1();
                $.ajax(
                    url:url,
                    type:"post",
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function(data)
                        console.log(JSON.stringify(data));
                        if(data.msg=="操作成功"&&data.data!=null)
                            let uploadSuccessPath=data.data;
                            let postSData="appkey":"cad_background","appval":data.data;
                            let resultCount=sensorServer.updateSettingsInfo(postSData);
                            if(resultCount==1) 
                                alert("上传成功！");
                            else
                                layer.msg("保存失败！");
                            
                        else
                            alert(JSON.stringify(data));
                            alert("上传失败！");
                        
                    ,
                    error:function(e)
                        alert("错误！！");
                
                    
                );
            
          )
             

//
    
        function toDataURL(url, callback) 
             公众号回复即可获取代码
        
        //调用
       // toDataURL(https://www.111.com/1.jpg, function(dataUrl) 
       //   console.log(RESULT:, dataUrl)
       // )

 好了手机端也可以了。