vue專案中上傳頭像的簡易方法(一)

2021-09-12 03:47:42 字數 722 閱讀 9968

作為一名**屆的前端碼農,上傳頭像這樣的功能肯定是見怪不怪了,

這兩天有點兒空餘時間,整理了一下上傳頭像的功能實現方法。

首先考慮上傳的相關需求要求

(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也有可取之處。它可輔助規範...