图片上传的解决方案（4种）

傷城~ 2023-07-17 15:34 11阅读 0赞

##### 1、使用ajax上传 #####

设置header中的Content-type

//继续使用上文的formDate
    let config = { 
      headers: { 
        'Content-Type': 'multipart/form-data'
      }
    }
    axios
      .post('serverUrl', formDate, config)
      .then(res => { 
        console.log(res)
      })
      .catch(err => { 
        console.log(err)
      })

##### 2、input标签之file类型 #####

（1）input标签之file类型

*  accept  
    指定选择文件类型的范围。默认为所有文件类型  
    图片为 accept=“image/\*”
 *  capture  
    当文件类型为图片或视频且在移动端时，此属性才有意义。  
    capture = ‘user’ 调用前置摄像头  
    capture = ‘environment’ 调用后置摄像头  
    不设置则为用户自己选择
 *  multiple  
    一个 Boolean 值，如果存在，则表示用户可以选择多个文件
 *  files  
    返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作。

<input type="file" multiple id="imgLocal" accept="image/*" />
    
    // js
    let inp = document.querySelector('#imgLocal')
    inp.onchange = function(e) { 
      let fileList = document.querySelector('#imgLocal').files
      console.log(fileList) //files
    }

##### 3、FormData对象 #####

FormData 对象的使用：

用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成 一个 queryString  
异步上传二进制文件。  
（1）构造函数 new FormData（）  
（2）方法 formData.append(name, value, filename)

*  name:属性名
 *  value:属性值，在我们这里则指 file 数据
 *  filename:当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是
 *  List item

“blob”。File 对象的默认文件名 是文件的文件名。

// 继续使用上文的file
    const formDate = new FormData()
    formDate.append('userPicture', file, '1.jpg')

##### 4、FileReader 对象：读取文件（实现图片预览） #####

> FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

（1）、构造函数 new FileReader()  
（2）、属性

*  FileReader.readyState  
    表示 FileReader 状态的数字，取值如下  
    0：EMPTY/还没有加载任何数据  
    1：LOADING/数据正在被加载  
    2：DONE/已完成全部的读取请求
 *  FileReader.result  
    文件的内容。该属性仅在读取操作完成后才有效。

（3 ）事件以及方法

*  FileReader.onload  
    处理 load 事件。该事件在读取操作完成时触发
 *  FileReader.readAsDataURL() 开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。

//继续使用上文的fileList
    let file = fileList[0]
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file) //读取图片
    fileReader.addEventListener('load', function() { 
      // 读取完成
      let res = fileReader.result
      // res是base64格式的图片
    })
    将 DOM 上 img 的 src 设为读取的结果即可实现预览功能。

##### 5、FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串 #####

就是上面所讲到的FileReader对象上的readAsDataURL（）方法将读取的文件转化为base64编码的字符串