vue实现单图片上传

文件上传

• 实现界面效果 绑定一个 @change事件

                <label for="name">用户头像:</label>
                <input class="form-control" type='file' name='pictureImg' @change="onHeaderchange"/>

• 在 methods调用该事件传入event参数 获取路径

onHeaderchange(ev){
           this.file = ev.target.files[0];
         },

• 在用表单提交事件new一个formData 实现表单项数据 再调用接口

 onuserAddSubmit(){
          const formData = new FormData();
          formData.append("username", this.username); // 表单项
          formData.append("psw", this.password);
          formData.append("fileHeader", this.file);
          // 发生请求
          RequestUserAdd(formData)
            .then(data => {
              if (data.resultCode === 1) {
                this.$router.replace({ path: "/user/userList" });
              }
            })
            .catch(err => {
              this.message = "添加用户失败:" + err;
            });
        }
      }

• 在接口是用axios封装了的

export const RequestUserAdd = (params) =>axios.post(`${BASE_URL}/api/add`,params).then(res => res.data);

注意：上传头像一定会使用formData 先new一个formData