vue端上传头像该如何处理

Question

vue端如何处理修改头像

Answer 1

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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条评论