Vue上传头像到服务器加回显照片

1：传文件流，转化格式传给后台

参考文章：https://www.jb51.net/article/119155.htm

https://www.cnblogs.com/lqqchangeload/p/12870418.html

https://blog.csdn.net/AK852369/article/details/102641619?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.compare

   <div class="update">
      <input
        type="file"
        @change="uploadFile($event)"
        ref="avatarInput"
        accept="image/*"
      />
    </div>

<script>
 methods: {
    uploadFile(e) {
      var file = e.target.files[0];
      var formData = new FormData();
      //这里是生成链接需传的参数
      formData.append("file", file);
      formData.append("key", "Gn1xVdagWO");
      this.$axios({
          method: "post",
          url:"uploadFile",
          data: formData    
        })
        .then((res)=> {
        //获取链接再赋值就行了
        console.log(res.data.info.url)
        });
    },
</script>
 

2：通过new FileReader()把上传的图片转为base64的格式，将转换后的数据给data中的imageUrl,将imageUrl作为参数提交到后台

参考文章：https://www.jianshu.com/p/d876f045127a