前端文件上传_前端上传文件到后端

文件上传方式

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

文件相关的对象

file对象其实是blob的子类

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

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

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

Blob对象

<template>
  <div>
    <input type="file" name="file" @change="FileChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    
  },
  methods:{
    FileChange(e){
      let file=e.target.files[0]
      console.log(new Blob([file]),'blob')
    }
  }
  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

转化关系

应用1

blob对象还提供一个文件切割方法slice()
fileReader可以将文件转成base64格式

<template>
  <div>
    <input type="file" name="file" @change="FileChange">
    <img style="width:200px;" :src="imgBase64"/>
  </div>
</template>

<script>
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
      }
    }
  }
  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

应用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 })
  })
1
2
3
4
5