点击头像上传; post上传文件错误小记

点击头像上传; post方式上传文件错误小记

因为之前踩过这个坑所以记录一下, 避免以后忘记

1. 上传报错的问题

1. 首先要实例化一个对象; 总是会忘记

这里的this指向监听元素节点; 重点在于容易忘记this.files是一个数组;
一定要取出来

let fd = new FormData()
let file = this.files[0] //这个地方的[0]一定要记得加上

2. 要检查是不是undefined, 因为有可能在选择文件的过程中取消操作

if (files !== undefined) { //当选择头像之后再上传, 不选择不上传
            fd.append('file', files) //按照接口文档填写参数名
            // 发送请求
            axios.post('/api/shared/uploadPortrait', fd).then(res => {
                if (res.data.errno === 0) { //请求成功显示新头像
                    dom.get('#logo img').src = axios.defaults.baseURL + res.data.data.url
                    // 储存头像地址
                    dom.get('#logo img').dataset.v = res.data.data.url
                    // 服务器原因,存不上; 所以本地存一份
                    localStorage.setItem('imgUrl', res.data.data.url)
                }
            })
        }

2. 利用label标签实现点击一个盒子, 弹出文本选择的功能;

<label\>
  <input type\="file" id\="file"\>
  <span id\="logo"\>
    <img src\="../../assets/images/user-logo.jpeg" alt\="" data-v\=""\>
  </span\>
</label\>