js获取上传文件内容

js 获取上传文件的字节数及内容

<div>
    上传文件 ： <input type="file" name = "file" id = "fileId" /> 
    <button  type = "submit" name = "btn" value = "提交" id = "btnId" onclick="check()" /> 提交
</div>
<script>
    function check() {
        var objFile = document.getElementById("fileId");
        if(objFile.value == "") {
            alert("不能空")
        }
        console.log(objFile.files[0].size); // 文件字节数
        var files = $('#fileId').prop('files');//获取到文件列表
        if(files.length == 0){
            alert('请选择文件');
        }else{
            var reader = new FileReader();//新建一个FileReader
            reader.readAsText(files[0], "UTF-8");//读取文件 
            reader.onload = function(evt){ //读取完文件之后会回来这里
                var fileString = evt.target.result; // 读取文件内容
        }
    }
}

// 以上是网络上参考内容，以下是我在vue文件中实践的操作

<template>
  <div>
    上传文件 ： <input type="file" @change="handleBatchUpload" />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    handleBatchUpload(source) {
      const file = source.target.files;
      const reader = new FileReader();//新建一个FileReader
      console.log("reader", reader);
      reader.readAsText(file[0], "UTF-8");//读取文件 
      reader.onload = function(event) {//读取完文件之后会回来这里
        const sileString = event.target.result;// 读取文件内容
        console.log("sileString:", sileString);// 这个就是文件内容为字符串格式
        const data = JSON.parse(sileString);//解析字符串
        console.log("data", data); // 这个就是文件内容
      };
    }
  },
};
</script>