云盘上传-js文件上传

最近在做云盘，用到很多js对文件的操作，本来js基础就比较薄弱，写起来也是很费劲，不过还好最后都完成了，在此做个记录和分享。

1.第一步，写一个HTML标签

<input id="file" data-id="" class="hide" type="file"/>

2.使用onchange事件，获取file

$(document).on("change","#file",function(){
           var file = document.getElementById('fileSelector').files[0];
           var formData = new FormData();
           formData.append("file", file);
          $.ajax({
            type: "post",
            url: url,
            dataType: 'json',
            processData : false,
            contentType : false,
            data: formData,
            success: function(json){
            }
        });
        });

通过ajax发送到后台，后台代码这里就不展开讨论了。
现在问题来了，我们如果想要上传blob或者base64的格式怎么办？
下面给大家提供几种格式转换的方法：
-文件转base64

function fileToBase(files){//w文件转base64
  var reader = new FileReader();
  reader.readAsDataURL(files);
  reader.onload = function(){
      console.log(reader.result); //获取到base64格式图片
      return reader.result;
  };
}

-base64转blob

function base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };

如果使用layui的上传组件，事情会就简单很多

<button type="button" class="layui-btn" id="upload" style="display: none;">上传文件</button>

js获取文件流

  upload.render({
    elem: '#upload'
    , url: url
    , method: "post"
    , auto: false  //auto 参数必须设置为false
    ,size:"204800"
    ,accept:"file"
    ,exts: 'ppt|pptx|doc|docx|pdf|jpg|jpeg|png|bmp'
    ,choose: function(obj){  //上传前选择回调方法
      obj.preview(function(index, file, result){
            console.log(result);//base64格式文件
            console.log(file);//File文件格式
        });
    } , done: function (res) {//上传成功回调方法

        console.log(res)
    }
});

至此我们就拿到了base64和File格式的文件。
对FileReader感兴趣的可以深入研究下

最后编辑于：2020.10.14 16:58:02