js jq img doc docx转成base64 base64转成file对象上传ajax

本文链接：https://blog.csdn.net/weixin_42796490/article/details/103063145

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script src="file.js"></script>
</head>


<body>
<input type="file" class="file" multiple>

<div id="file"></div>
</body>
<script>

    $("body").delegate(".file", "change", function(){

        uploadFile( $(this).val(),$(this)[0].files)


    })


    // function objFile() {
    //     console.log("123")
    // }
</script>
</html>



file.js文件
function uploadFile(fileName,fileThis) {

//获取文件名称
// return  fileName = $(this).val();
//标识
var file=false
var fileType=""
//判断filename
if(fileName==undefined||fileName==""){
    this.file=false
    if(file==false){
        $(this).prev().text(abridge);
    }
}else{
    //截取成  文件.xlsx  fn=文件.xlsx
    fn=fileName.substring(fileName.lastIndexOf("\\")+1);
    //fileType 文件类型 后缀名
    fileType=fn.split('.')[1]
    //设置成全局
    abridge=fn
    // $(this).prev().text(fn);
     $("#file").text(fn)
    this.file=true
}


//你的选的文件长度
if(fileThis.length==1){
    // 如果选择的文件格式是png jpg
    if(fileType=="png"||fileType=="jpg"){
        //直接调取objFile方法
        objFile(fileThis)
    }else{
        var reader = new FileReader();
        reader.readAsDataURL(fileThis[0])
        reader.onload = function () {
            var result=this.result
            if (result.indexOf('application/octet-stream')) {
                if ('docx' === fileType) {
                    result = result.replace('application/octet-stream', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
                }
                if ('doc' === fileType) {
                    result = result.replace('application/octet-stream', 'application/msword')
                }
            }
            //base64
            console.log(result)

            // fileList.push({
            //     file: result,
            //     toolId:formId,
            //     toolDetailId:toolDetailId,
            //     type: type
            // })



            function dataURLtoFile(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                console.log(mime)
                console.log(arr)
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr],'1.word',{type:mime});
            }
            // dataURLtoFile(result,name)
            // console.log(File)
            var formData = new FormData();
            formData.append("file", dataURLtoFile(result));
            console.log(formData)

        }
    }
}else{
    //var 存储
    let arrObj=[]
    //遍历当前选择的文件push到arrObj里
    for(let i=0;i<fileThis.length;i++){
        arrObj.push(fileThis[i]);
    }

    arrObj.forEach((val)=> {
        valType=val
    })
    //截取文件后缀名
    let fileType=valType.name.split('.')[1]
    if(fileType==("pdf")||fileType==("doc")||fileType==("docx")){
        // $("#wrapTips").css("display", "block"),
        //     $(".cont_span").html("文件多选时，只支持png，jpg请重新上传")
        // return false
        alert("文件多选时间，支支持png.jpg")
        console.log("文件多选时间，支支持png.jpg")
    }else{
        objFile(fileThis)
    }
}

}

function objFile(fileThis) {
    //var 存储
    let arrObj=[]
    //遍历当前选择的文件push到arrObj里
    for(let i=0;i<fileThis.length;i++){
        arrObj.push(fileThis[i]);
    }

var p = new Promise(function(resolve,reject){
    var arr2 = [];
    arrObj.forEach((val,index)=>{
        let reader = new FileReader();
        reader.readAsDataURL(val);
        reader.onload = function(e){
            arr2.push(e.target.result);
            //当arr数组的元素个数与arr2数组的元素个数相等时证明已经全部转换完成
            if(arr2.length == arrObj.length){
                resolve(arr2);
            }
        }
    })
})

//base64转换完成时执行，将整个res（arr2）转换为JSON字符串
p.then(function(res){
    //转换 base64转成pdf
    var base64=JSON.stringify({files:res})
    console.log(res[0])
    var resdata=res[0]

    function dataURLtoFile(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 File([u8arr],'a.jpg',{type:mime});
    }
    // dataURLtoFile(result,name)
    // console.log(File)
    var formData = new FormData();
    formData.append("file", dataURLtoFile(resdata));
    console.log(formData)

    // switchedPdf(base64)
},function(error){

})

}

function switchedPdf(base64) {
    $.ajax({
        url: '/file/convert/pdf',
        dataType: 'json',
        type: 'POST',
        async: false,
        data: base64,
        processData: false,
        contentType: 'application/json',
        success: function (data) {
            // var  base_64=data.data
            // fileList.push({
            //     file: "data:application/pdf;base64,"+base_64,
            //     toolId:formId,
            //     toolDetailId:toolDetailId,
            //     type: type
            // })
            // fileList=fileList.reverse().filter(function(item,index){
            //     var _index=fileList.findIndex(function(_item){
            //         return item.type == _item.type;
            //     });
            //     return index == _index;
            // });
            // fileList.reverse();
        }
    })
}