前端文件上传

• 前端

文件上传方式

前端文件上传有两种方式，第一种通过二进制blob传输（formData传输），第二种是通过base64传输

文件相关的对象

在这里插入图片描述

file对象其实是blob的子类

blob对象的第一个参数必须是一个数组，你可以把一个file对象放进去就可以给你转成blob对象

formData可以使一个files以一个二进制的形式传递给后端

fileReader用于把文件（file对象或者blob对象）读成某种形式，如base64，text文本

Blob对象

  
    
  



export default {
  name: 'HelloWorld',
  props: {
    
  },
  methods:{
    FileChange(e){
      let file=e.target.files[0]
      console.log(new Blob([file]),'blob')
    }
  }
  
}

在这里插入图片描述

转化关系

在这里插入图片描述

应用1

blob对象还提供一个文件切割方法slice()

fileReader可以将文件转成base64格式

  
    
    
  



export default {
  name: 'HelloWorld',
  props: {
    
  },
  data(){
    return{
    imgBase64:''
    }
  },
  methods:{
    FileChange(e){
      let file=e.target.files[0]
      // console.log(new Blob([file]),'blob')
      // let _sliceBlob=new Blob([file]).slice(0,20000)
      let _sliceFile=new File([file],'test.png')

      let fr=new FileReader()
      fr.readAsDataURL(_sliceFile)
      let self=this
      // 由于转成base64是一个异步的过程所有需要再onload事件里面执行，才能真正拿到result结果
      fr.onload=function(){
        console.log(fr.result)
        self.imgBase64=fr.result
      }
    }
  }
  
}

在这里插入图片描述

应用2

做一个上传图片的操作。需要将图片转成blob对象才能传输给后端，再将blob转换成url放到fileList放进去

this.$api.getVehiclePicUrl(form.picName).then(res => {
                  const blob = new Blob([res], { type: 'image/png' })
                  const url = window.URL.createObjectURL(blob)
                  this.fileList.push({ url: url })
  })

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/2c56d2e261.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐