js七牛上传图片文件类型变成 application/octet-stream

最新推荐文章于 2025-06-25 19:12:13 发布

原创最新推荐文章于 2025-06-25 19:12:13 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨使用JavaScript进行文件上传时遇到的异步加载顺序问题，并详细解析如何利用七牛云平台实现图片的Base64格式上传。文章深入讲解了获取上传Token、设置上传URL及处理上传响应等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用js上传文件的时候一不小心踩到了这个坑，我这边排查了一下遇到这个问题原因是异步加载前后顺序的问题，内心崩溃

function fn_uploadpic(){   
//七牛token 七牛云平台安全标识
var qiniutoken = '';
//七牛云图片base64格式上传地址
var uploadUrl = "http://upload.qiniup.com/putb64/-1";
//需要上传的图片内容 base64格式
var imgStr = '';
//七牛云平台 配置的域名
var urlHeader = "http://**************/";
//64位文件上传
var reader = new FileReader();
//filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
reader.readAsDataURL(document.getElementById("imgFile1").files[0]);
reader.onload = function (e) {
    //或者 e.target.result都是一样的，都是base64码
    imgStr = reader.result.split(',')[1];
    if (imgStr!=""){
        qnToken(imgStr);
    }
}
function qnToken(imgStr) {
    //todo 获取token
    $.ajax({
        url: '/api/qiniu/getTokens',
        type: 'get',
        dataType: 'json',
        //平台登录token 不重启30天过期
        headers: {
            'token': 'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1NDgyMjk4NDcsImlzcyI6IkNhclNoaUxpYnJhcnkiLCJzdWIiOiJbMTA5MCxcIjE3NjA4NDg1MjAzXCJdIn0.AcZUEEqhEHpj2GMzS0JQLsvnG65MoLGadiRDNaN_WAw'
        },
        async: false,
        success: function (data) {
            qiniutoken = data.data.upToken;
            uploadImg(imgStr,qiniutoken);
        },
        error: function (e) {
            alert(JSON.stringify(e));
        }
    })

}
//上传图片
function uploadImg(imgStr,qiniutoken) {
    //todo
    var xhr = new XMLHttpRequest();
    xhr.open("POST", uploadUrl, true);
    //文本类型
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    //七牛认证信息 注意空格
    xhr.setRequestHeader("Authorization", "UpToken " + qiniutoken);
    xhr.send(imgStr);
    //监听状态
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var result = xhr.responseText;
            console.log('上传请求结果数据:' + result);
            result = JSON.parse(result);
            console.log('上传请求结果数据:' + urlHeader + result.key);
//图片路径展示出来了，result.key 就是生成token接口的key,就是文件命名，我这个是在token里面写死了呢，可以改成获取token 的时候前端传入，
            var urllist = urlHeader + result.key;
//下面就是图片展示到页面上去我自己的逻辑了
            var vtype = $("#imgFile" + colid).attr("data-type");
            var imglist = fn_show_img(urllist, vtype, filetype);
            $("#uploaded-img1").append(imglist);
            $("#uploaded-img1").show();
            $("#upload-img1").html("");
            $("#upload-img1").hide();
        }
    }

}
}

下面贴上前端传入key的后端代码