vue學習經驗總結(頭像前裁切後上傳)

2021-10-09 21:25:29 字數 1747 閱讀 5086

1.需要的部分引用:

resurl後台傳來的頭像

2.封裝元件部分:

html:

確定    

上傳

引用部分:

事件部分:

mounted() ,

});},

methods: else if (window.url != undefined) else if (window.webkiturl != undefined)

return url;

// console.log(url)

},change(e)

let files = e.target.files || e.datatransfer.files;

if (!files.length) return;

this.panel = true;

this.picvalue = files[0];

this.name = this.picvalue.name;

// console.log(this.picvalue)

this.url = this.getobjecturl(this.picvalue);

//每次替換要重新得到新的url

if (this.cropper)

this.panel = true;

},sureimg()

settimeout(function () , 100);

// crop

},getroundedcanvas(sourcecanvas) ,

postimg()

// let dataimg = new blob([new uint8array(array)], );

// console.log(dataimg)

// let files = new window.file([dataimg], this.name, )

function dataurltofile(dataurl, filename)

return new file([u8arr], filename, );

}let files = dataurltofile(this.headerimage, this.name);

// console.log(files)

let formdata = new formdata();

this.gettoken(updatephotoapi, formdata, (res) =>

});},

},

let files=dataurltofile()是將base64格式的路徑轉換成file檔案流,然後傳給後端

當然,如果後端可以轉化,就不需要這步,看後端需要什麼格式的相應做改變

css樣式:

Vue經驗總結

題記 前段時間時隔8個月重新拾起了vue,vue的太 yi 好 jing 用 wang 了 wan 以前用慣了react的dva然後突然切換到vue的vuex真的有點不習慣。這個是vuex中的大哥大,什麼都歸它管 state mutations getter action module 你可以把它理...

vue面試經驗總結

props e mi t自定義 事件ev ent.emit 自定義事件event.emit自定 義事件e vent on 兄弟傳值 注意銷毀 event.off 生命週期 建立或update從外到內 渲染從內到外 vue 高階特性 hello p 子 type text value msg inpu...

學習經驗總結(二)

實事求是 分清主次 現象 最近效率低,自信不足。原因 1 學的不紮實,拖延的太厲害。回顧一年學習歷程,努力 太多,假努力太多!無意義學習時間太多,才弄得又累又忙,又沒效果。2 做事前要思考一下,不要盲目的做。3 不去想不美好的事情,不美好的人,讓自己保持心情愉快。4 學習知識不及時複習,學習過程,注...