今天无意之间跟同事聊起图片的上传方式base64字符串,发个文章跟大家分享一个

图片的两种处理方式

二进制方式

在JS原生中我们通常获取图片上传一般都是通过FormData去修改请求头,处理文件的二进制.

二进制预览步骤

(1)file表单onchange事件
(2)获取选择的文件this.files[0]
(3)把文件生成URL.createObject()
(4)把生成url赋值给img标签src

//(1) 给file表单注册onchange事件
document.querySelector('').addEventListener('change',function(){
  //(2)获取用户选择的文件
  let file = this.files[0]
  //(3)将file文件转成url路径
  let url = URL.createObjectURL(file)
  //(4)把url路径设置给img标签src
  document.querySelector('').src = url
})

二进制的提交 FormData (这一步修改请求头,自动处理文件二进制) 一般用于form表单提交(含图片)

(1)创建FormData
(2)调用append('参数名',file对象)
(3)FormData发给服务器

//2.创建FormData对象 转换图片提交
        let fd= new FormData()
        //2.1在里面加入参数名和file对象
        fd.append('参数名',file对象)

       //3.发送ajax
       axios({
         
       }).then(res=>{
         //成功回调
         console.log(res)
        
      }
       })

注意点:只有当接口有文件时才可以直接用fd作为参数(因为fd会修改请求头) 如果接口不是文件接口,需要自己把fd里面的东西取出来变成对象

base64字符串

这是在vue开发中标准用法简洁,方便,这里需要用到一个知识点# FileReader developer.mozilla.org/zh-CN/docs/…
通过内置对象FileReader读取文件得到base64,省去非常繁琐的DOM操作

base预览步骤

(1)file表单onchange事件
(2)获取文件的this.files[0]
(3内置对象FileReader读取文件得到base64
(4)把生成的base64赋值给img标签

  data() {
    return {
      //用户头像  base64字符串
      avatar: ''
    }
  },

 methods: {
    //1.头像预览
    onFileChange(e) {
      //(1)获取用户选择的文件
      let file=e.target.files[0]
      //如果用户选择了base64
      if(file){
        //(2)内置对象FileReader读取文件
        const fr=new FileReader()
        //开始异步读取文件数据
        fr.readAsDataURL(file)
        //(3)注册读取成功的回调
        fr.onload =e =>{
          console.log(e)  //读取成功后的事件对象,readAsDataURL事件
          //读取的base64绑定到data
          this.avatar=e.target.result
          }

base提交步骤

在这就可以直接提交字符串

   //2.头像提交
  async  uploadAvatar(){
         //发送ajax
         const {data :res}=await this.$axios.patch('/my/update/avatar',{avatar:this.avatar})
       
        //提示用户更新成功
          this.$message.success(res.message)
       if(res.code===0){
           //清空内容
           this.avatar=''
           //提交给vuex处理
           this.$store.dispatch('getUser')

        }
    
    }

如果觉得我写的还行,不要吝啬你们的一键三连哦

详解图片上传的两种处理方式,看过的人都说好..