axios 手写文件上传逻辑

最新推荐文章于 2024-05-23 15:38:49 发布

兔子也发飙

最新推荐文章于 2024-05-23 15:38:49 发布

阅读量137

点赞数

分类专栏：如此迷惑行为文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qq_44989936/article/details/120050115

版权

如此迷惑行为专栏收录该内容

23 篇文章 0 订阅

订阅专栏


 <input type="file" id="file"  onChange="b" name="img" />


<script>

  b(){
  var value;
  var file= document.getElementById("file").files[0]
  var reader = new FileReader();
//将文件以Data URL形式读入页面
    console.log(file)
  var  that =this
  reader.readAsDataURL(file);
  reader.onload=function(e){
    value=e.target.result
   var s=value.split(",")
    s[1]=window.atob(s[1])
    that.a(s[1])

  }

}
,a(value){
  var data={img:value}
   this.$axios(
      {url: "http://localhost:88/server/putImg",
        method:'POST',
        data,
        headers:{'Content-Type':'multipart/form-data; boundary=----WebKitFormBoundarydDzA69PAEHyeHj0w'},
       
        transformRequest: [function (data) {
        var v1="------WebKitFormBoundarydDzA69PAEHyeHj0w\r\n"
            +"Content-Disposition: form-data; name=\"img\"; filename=\"bbbc.png\"\nContent-Type: image/png"+"\r\n\r\n"
          var v2="\r\n------WebKitFormBoundarydDzA69PAEHyeHj0w--"
          return   v1+data.img+v2
        }],
      }).then((res)=>{
     console.log(res)
   })
}
</script>

这里我不得不说几个坑“”的bug
①boundary后面比下面少两个–
②请求体结尾多两个–
③文件数据是没有编码的二进制数据，不需要编码成utf-8，只需要base64解码