vue excel文件上传 blob类型下载 文件转base64

<el-upload style="float:right" v-loading="uploadLoading" action="../oa/api/v1/entry/uploads/" :limit="1" :http-request="uploadExcel" :file-list="fileList">
          <el-button type="success" size="small" plain style="margin-left:0px">日报导入</el-button>
        </el-upload>

uploadExcel(item) {
      this.uploadLoading = true;
      const fileObj = item.file;
      const form = new FormData();
      form.append('file', fileObj);
      uploads(form).then(res => {
        this.$message.success('文件：' + fileObj.name + '上传成功，批量添加完成！');
        this.getDataMethod()
        this.fileList = []
      }).catch(() => {
        this.fileList = []
        this.$message.error('文件' + '上传失败！');
      }).finally(() => {
        this.uploadLoading = false;
      });

blob下载
直接a标签或者跳转下载

async downloadAll() {
      var postdata = {
        date_after: this.date_after,
        date_before: this.date_before,
      };
      const data = await downloadReport(postdata)
      const BLOB = new Blob([data])
      const url = window.URL.createObjectURL(BLOB)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.download = '汇总数据.xlsx'
      link.target = '_blank'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }

万能读取response文件转base64方法

getMusicData(name).then((res) => {
                    var fileReader = new FileReader()
                    var blob = res;
                    let that = this;
                    fileReader.onload = function(evt) {
                        // 用Data URI的格式读取文件内容 
                        var result = evt.target.result;
                        // 将图片的src指向Data URI 
                        // music.setAttribute("src", result);
                        that.currentSrc = 'data:audio/mp3;base64,' + result.substring(this.result.indexOf(',') + 1);
                        // that.currentSrc = result;
                        //保存到本地存储中 
                        try {
                            localStorage.setItem("music", that.currentSrc);
                            console.log(window.localStorage.getItem('music'))
                        } catch (e) { console.log("Storage failed: " + e); }
                    };
                    // 以Data URI的形式加载blob 
                    fileReader.readAsDataURL(blob);
                })

系统文件读取

onChange(event) {
                var file = event.target.files[0];
                var reader = new FileReader();
                let that = this;
                reader.onload = function(e) {
                    // e.target.result就是该文件的完整Base64 Data-URI
        			 that.$refs['imgimg'].setAttribute('src',this.result);
                };
                reader.readAsDataURL(file);
            },

或者

<input type="file" @change="upData($event)" ref="InputFile" name="files" />

fileImport(data) {
                var reader = new FileReader();
                let fileData = this.$refs.fileElem.files[0];
                reader.readAsDataURL(fileData);
                let _this = this;
                reader.onload = function(e) {
                    //这里的数据可以使本地图片显示到页面
                    _this.addimg = e.srcElement.result;
                    fileImport(this.result.split(',')[1])
                };
                // 使用formapi打包
                let formData = new FormData();
                formData.append('file', fileData);
                this.axios.post('/api/v1/uploads/course/img', formData).then(function(res) {
                    console.log(res);
                    _this.addimgtijiao = res.data.path;
                });
            }

极致简写

responseType: 'blob'
var obj_url = window.URL.createObjectURL(res);
that.currentSrc = obj_url;

vue获取图片宽高

 uploadFile(event){
        let that = this;
        let file = event.target.files[0];
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file); //根据图片路径读取图片
        fileReader.onload = function(e) {
          let base64 = this.result;
          let img = new Image();
          img.src = base64;
          img.onload = function() {
            that.imgInfo = {
              width: img.naturalWidth,
              height: img.naturalHeight
            };
            console.log("宽：" + img.naturalWidth + " 高：" + img.naturalHeight);
          }
        }
      },

ant-design upload写法

beforeUpload(file, fileList) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        message.error('请上传JPG/PNG格式图片!')
        return
      }
      let reader = new FileReader()
      reader.readAsDataURL(file)
      let self = this
      reader.onload = function (e) {
        var image = new Image()
        image.src = reader.result
        image.onload = function () {
          let width = image.width
          let height = image.height
          console.log(width)
          // isAllow = width >= Max_Width && height >= Max_Height
          // showTip2(isAllow)
        }
        // self.fileImport(this.result.split(',')[1])
        self.icon = this.result
      }
    },