Day27 vue.js简易照片上传功能(base64)

延续昨日
今天我们来处理一下新增帐户的照片
这是我们目前的修改帐户页面

首先先把layout做出来
在原本帐号的地方给一个div 放入img


再来给几个按钮


Layout长的蛮丑的 但是堪用就好之後再慢慢改
由於我们的资料库是jsonserve 未来要用的公司资料库也跟jsonserve类似
所以我们存图片的方式要用base64的方式存取
总之挺麻烦的 我建议没有特别的需求可以用firebase就好
用firebase可以存成fromdata的格式很方便
总之接下来就是在input上面加一个@change

再去methods设定一下 onfile

onfile(event){
     this.file=event.target.files[0]
     let filereader=new FileReader();
  filereader.readAsDataURL(this.file)
   filereader.addEventListener("load",()=>{
     this.useravatar=filereader.result;
console.warn(this.useravatar)

   })
     
   }
别忘了在data给一个useravatar
 data() {
   return {
     db_api: global.db_api,
     showPassword: "",
     useraccount: "",
     userpassword: "",
     useremail: "",
     username: "",
     useravatar:"",
     inputrule: [(x) => x.length > 0 || "不得为空值"],
   };
 },

再把刚刚的img那边的src换成useravatar

之後点选择档案选择後会看到这个console.warn

那一长串的网址就是这张图片的网址
也就是我们可以自由选择照片了
再来就是上传图片的按钮
想了一想上传图片的按钮应该不需要就跟确认修改一起就好
所以把上传图片的按妞删了!
所以现在是长这样

再来就是修改确认修改的内容

我们先修改getsession function

async GetSession(){
    let user=sessionStorage.getItem('user-info');
    this.username=JSON.parse(user).username
    this.useraccount=JSON.parse(user).id
    this.userpassword = JSON.parse(user).password;
    this.useremail = JSON.parse(user).email;
    this.useravatar=JSON.parse(user).avatar;
      if (!user) {
    alert("请先登入");
    this.$router.push({ name: "Login" });
  }
    }

加入了一行 this.useravatar=json.parse(user).avatar

然後再去我们的db.json
新增一个avatar栏位 把那一长串的网址给复制过去

最後在 我们的changeAccount function里面新增这一行

再来就是测试看看了!!
修改完成了!从原本的大头贴换成这个黑武士的

再来就是把这段程序码依样画葫芦改成注册页的

在data里面直接给值

在signup function 里面 多一行

async signup(){
       
        try {
          if(this.$refs.id.validate()) {
           let result = await axios.post(`${this.db_api}`+"users",{
          id:this.useraccount,
          password:this.userpassword,
          email:this.useremail,
          username:this.username,
          avatar:this.avatar
          
        })

Db的avatar 栏位等於this.avatar

这样就改完啦!!
我们来试试看改的怎麽样吧!


再来是修改帐户的



嘟嘟噜终於完成了
今天真的好痛苦 研究很久很久很久很久很久如何把档案存到资料库至
在把照片抓出来 如果没事真的用firebase就好 轻松简单

今天就到这边了
铁人赛剩下3天功能也完成得差不多了
剩下的功能我希望
1.完善团队介绍
2.把图片放到旁边的drawer
3.新增管理者帐号功能删帐号删除文章等等
4.专案分页功能
5. 搜寻专案功能
6.排序专案功能
7.专案打包成docker
仔细想想在铁人赛期间大概率完成不了全部
我想想优先顺序 再来决定明天要完成什麽
说不定我突然发疯全部做完ORZ
好啦今天差不多到这边啦!
我们明天见!