vue端上传头像该如何处理

Question

vue端如何处理修改头像

Answer 1

提问者 前端侠 2018-08-27 23:02:00

return {
    userForm: {
    name:'',
    username: '',
    gender: '',
    birthday: '',
    email: '',
    mobile: '',
    image:''
    },
}
handleAvatarSuccess(res, file) {
    //this.imageUrl = URL.createObjectURL(file.raw);
    this.userForm.image = URL.createObjectURL(file.raw);
    console.log(this.imageUrl);
},
confirmModify () { // 确认修改
    var that = this;
    updateUserInfo(that.userForm).then((response)=> {
    that.saveInfoAjax();
    }).catch(function (error) {
    console.log(error);
    });
},

vue代码如上

• bobby #1

  你这个代码逻辑是运行要出错还是什么？

• 提问者 前端侠 回复 bobby #2

  出错，image : ["提交的数据不是一个文件。请检查表单的编码类型。"]

• 提问者 前端侠 回复 bobby #3

  这个问题困扰了很久，查了很多文章，没说到具体原因是什么，请问老师可以加下qq，帮我调试下吗？

点开查看后面1条评论

Answer 2

bobby 2018-08-21 18:26:03

这个需要自己去写css和js逻辑了 https://element.eleme.io/#/zh-CN/component/upload 你可以看看这个组件里面有头像上传

• 提问者 前端侠 #1

  一直报这个错，是不是后台django的imagefiled没用对？image : ["提交的数据不是一个文件。请检查表单的编码类型。"]

• bobby 回复 提问者 前端侠 #2

  你提交的数据文件不对 你是如何提交文件的？

• 提问者 前端侠 回复 bobby #3

  userForm: {
                  name:'',
                  username: '',
                  gender: '',
                  birthday: '',
                  email: '',
                  mobile: '',
                  image:''
              },
  handleAvatarSuccess(res, file) {
          this.userForm.image = URL.createObjectURL(file.raw);
        },
  之后就是updateuserinfo函数了：
  updateUserInfo(that.userForm).then((response)=> {
                  //
              })

点开查看后面2条评论