作為一名**屆的前端碼農,上傳頭像這樣的功能肯定是見怪不怪了,
這兩天有點兒空餘時間,整理了一下上傳頭像的功能實現方法。
首先考慮上傳的相關需求要求
(1) 格式要求(jpg | png | jpeg | gif )
(2) 大小要求(比如不超過300kb)
(3) 尺寸大小限制(1:1,4:9,9:16)
(4) 是否可以裁剪
(5) 單張還是多張(單張一般用在使用者頭像)
…具體例子來解決問題
1、html部分
2、css部分
3、js部分
使用者選擇之後的渲染方法有兩種到這裡,最簡單的上傳頭像問題就解決了,
(上傳前)
(上傳後)
下期更新怎麼實現裁剪相關需求
分布式專案中 上傳檔案步驟
第一步 將fastdfsclient工具類放置在common 公共模組 下 第二步 web層 1.在resources包下,新建乙個目錄fastdfs,將配置檔案fdfs client.conf 放在該目錄下 第三步 編寫controller層 controller層 如下 package cn.k...
vue 專案中的scoped
加了scoped的樣式,在打包後,就會給同乙個帶有scoped的style裡面的樣式增加一段特殊標識,看下面例子就曉得了 打包後在.css檔案中就成了如下 one h1 xx h2 xx h4 xx 這裡的 xx在同乙個scoped裡面的都一樣,不同的不一樣 這就是為什麼引入其他元件時,在帶有sco...
vue 關掉vue專案中的ESlint
在新建專案的時候,還信心滿滿的要標準開發,於是開啟了eslint 檢測,後來才發現,想法的太天真,空格縮排不對都要報錯,而且我對錯誤是0容忍。並且一般都是用外掛程式對 進行格式化,但還是很多錯誤,實在不想一遍遍去排查,於是找了找資料,關掉專案中eslint 但是eslint也有可取之處。它可輔助規範...