上传文件知识点总结

在实际项目中，不可避免的会有上传文件的功能，本篇文章，不会具体介绍实现该功能的各种插件，而是是总结一下，在原生input[type=file]上 实现，以及文件与数据流之间的转换

  <input class="fl Inp" type="file" @change="readURL">

upimg() {
    let fileinput = event.currentTarget
  // fileinput.files[0] 为该文件的file格式
    if (fileinput.files && fileinput.files[0]) {
// 如果后台接收的文件格式为file类型，则我们需要new FormData方法将文件转换为表单形式提交
        let formData = new FormData()
        formData.append('file', fileinput.files[0])
        upload(formData).then(response => {
// 文件上传成功，后台接口返回文件地址，前端显示在页面上
            this.imgUrl = response.data
        })
    }
}

以上方法则可以实现文件上传的功能，但是该方法有个缺点是，上传的文件都要放到服务器，会造成服务器资源的浪费

 

另一种需求是，我们选择文件，然后要在页面进行文件的重选、预览功能。或者说，后台需要的文件格式是base64或blob等格式，这个时候，就需要我们对file格式进行各种