上傳頭像功能的前後端互動。

阿新 • • 發佈：2019-01-20

建立工程。

關於工程的建立，前面的文章中已經做過介紹，此處不再贅述。本文的操作仍需要，express和multer兩個依賴項。

建立完畢之後，工程專案下的檔案目錄截圖如下圖所示：

這個工程專案比前幾篇文章多了一個allHeaders 的資料夾，這個資料夾是用來儲存圖片的，以保證後面後端給前端傳送圖片之用。

主要功能和起作用的位置有兩點：

1.當在頁面上上傳圖片之後，會儲存到這個檔案。

2.當前端需要後端給圖片資料的時候，會從這個檔案中讀取獲得。

先進入index.html前端檔案，進行設定。

設定按鈕操作程式碼如下：

</form>

此時開啟瀏覽器：顯示的介面如下：

通過上面的操作可以選擇好圖片，

此時我們就要對後端進行設定了，這個時候已經剛剛完成了前端的上傳功能的部分按鈕。

這個時候，我們進入index.js檔案中：

var express = require('express')

var bodyParser = require('body-parser')

var multer = require('multer')

var web = express()

web.use(express.static('public'))

web.use(bodyParser.urlencoded({extended:false}))

先將這幾句必須的程式碼寫好。

接著我們在後端建立檔案，來儲存我們上傳的圖片：

程式碼如下：

前端設定：

var sub = document.getElementById('sub')

// 增加一個事件監聽物件

sub.addEventListener('click',function(){

setTimeout(function(){

window.location.href = 'http://localhost:8080'

},10)

})

</script>

後端設定：

var account = 123321

var fullName = ''

// 當前配置資訊不負責上傳頭像，上傳頭像由前端負責

// 當前配置資訊只負責設定圖片的儲存路徑以及設定圖片的名字

var headerConfig = multer.diskStorage({

// 儲存的路徑

destination:'public/allHeaders',

// 設定圖片的名稱

filename:function(req,file,callback){

// 以.分割原始名字(驗證碼.png)

var name = file.originalname.split('.')

var fileType = name[name.length-1]

account++

// callback回撥函式生成圖片的名稱需要兩個值

// 值1：錯誤資訊

// 值2：圖片名稱

fullName = account+'.'+fileType

callback(null,account+'.'+fileType)

}

})

// 建立一個載入配置資訊的upload物件

var upload = multer({storage:headerConfig})

web.post('/upload',upload.single('photo'),function(req,res){

res.send('')

})

web.listen('8080',function(){

console.log('伺服器啟動......')

})

此時，我們重啟伺服器，重新載入網頁，點選上傳之後，便會看到，工程目錄下的allHeaders資料夾下已經有了圖片。

工程資料夾目錄下的所有檔案如下圖所示：

這個時候我們已經把圖片儲存好了，接下來只需要再完成將圖片在前端請求資料的時候，將這個圖片傳送給前端，前端接收之後，在介面上顯示出來就完成了上傳頭像的所有功能，是不是很簡單？

此時，前端對後端傳送一個get請求，然後後端在接收到請求之後向前端傳送圖片，前端接收之後在瀏覽器介面顯示出來。

前端設定：

function getHeader(){

var xhr = new XMLHttpRequest()

xhr.open('get','/getHeader')

xhr.send()

後端設定：

web.get('/getHeader',function(req,res){

res.send('allHeaders/'+fullName)

})

此時完成了傳送資料之間的所有功能。接下來要做的工作就是在前端建立個顯示圖片的標籤。

具體程式碼如下：

xhr.onreadystatechange = function(){

if(xhr.readyState == 4)

{

var headers = document.createElement('img')

headers.style.width = '200px'

headers.style.height = '200px'

headers.style.borderRadius = '50%'

headers.style.border = '10px solid white'

headers.src = xhr.responseText

document.body.appendChild(headers)

}

下附所有完整程式碼。通過本篇介紹，我們主要用到的檔案，只有前端的index.html和後端的index.js兩個檔案：

前端所有程式碼：

<!DOCTYPE html>

<head>

<style>

body {

background-color: yellow;

}

</style>

</head>

<body>

</form>

var sub = document.getElementById('sub')

// add增加 event時間 listenter監聽者

// 增加一個事件監聽物件

sub.addEventListener('click', function () {

setTimeout(function () {

window.location.href = 'http://localhost:8080'

}, 10)

})

getHeader()

function getHeader() {

var xhr = new XMLHttpRequest()

xhr.open('get', '/getHeader')

xhr.send()

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

var headers = document.createElement('img')

headers.style.width = '200px'

headers.style.height = '200px'

headers.style.borderRadius = '50%'

headers.style.border = '10px solid white'

headers.src = xhr.responseText

document.body.appendChild(headers)

}

</script>

</body>

</html>

後端所有程式碼：

var express = require('express')

var bodyParser = require('body-parser')

var multer = require('multer')

var web = express()

web.use(express.static('public'))

web.use(bodyParser.urlencoded({extended:false}))

var account = 123321

var fullName = ''

// 當前配置資訊不負責上傳頭像，上傳頭像由前端負責

// 當前配置資訊只負責設定圖片的儲存路徑以及設定圖片的名字

var headerConfig = multer.diskStorage({

// 儲存的路徑

destination:'public/allHeaders',

// 設定圖片的名稱

filename:function(req,file,callback){

// 以.分割原始名字(驗證碼.png)

var name = file.originalname.split('.')

var fileType = name[name.length-1]

account++

// callback回撥函式生成圖片的名稱需要兩個值

// 值1：錯誤資訊

// 值2：圖片名稱

fullName = account+'.'+fileType

callback(null,account+'.'+fileType)

}

})

// 建立一個載入配置資訊的upload物件

var upload = multer({storage:headerConfig})

web.post('/upload',upload.single('photo'),function(req,res){

res.send('')

})

web.get('/getHeader',function(req,res){

res.send('allHeaders/'+fullName)

})

web.listen('8080',function(){

console.log('伺服器啟動......')

})

此時重啟後端伺服器，重新整理瀏覽器介面，選擇圖片之後上傳，然後點選上傳頭像按鈕，得到的介面如下所示：

其他所有的上傳頭像的功能與此處流程基本類似。快去試試吧。

上傳頭像功能的前後端互動。

建立工程。關於工程的建立，前面的文章中已經做過介紹，此處不再贅述。本文的操作仍需要，express和multer兩個依賴項。建立完畢之後，工程專案下的檔案目錄截圖如下圖所示：這個工程專案比前幾篇文章多了一個allHeaders 的資料夾，這個資料夾是用來儲

Android Studio第四十期 - 上傳頭像功能支持權限管理

android 服務器代碼已經整理好，加了權限管理和SP保存上傳服務器的方法，希望能夠幫到大家~效果如下圖：地址：https://github.com/geeklx/MyApplication/tree/master/p025_upload_img 附：這裏借鑒了翔神（

【java小程式】小程式視訊上傳檔案的前後端程式碼

文章目錄小程式端程式碼 1、上傳視訊選中事件 2、背景音樂的頁面載入上傳檔案的後端程式碼上傳小視訊功能，我們是通過我的主頁點選上傳按鈕進行上傳，選中視訊後會

MVC Api微信小程式wx.uploadFile上傳檔案，前後端程式碼例項

// 小程式端js Page({ /** * 頁面的初始資料 */ data: { userHeaderImage: "../../../images/1.jpg" }

完美實現類似QQ的自拍頭像、上傳頭像功能！（Demo 原始碼）

現在很多下載客戶端程式都需要設定自己頭像的功能，而設定頭像一般有兩種方式：使用攝像頭自拍頭像，或者選擇一個圖片的某部分割槽域作為自己的頭像。一.相關技術　　若要實現上述的自拍頭像和上傳頭像的功能，會碰到

Android 7.0實現拍照、獲取相簿圖片上傳頭像功能

對網上關於Android7.0的上傳頭像進行整理 1.新增許可權管理。內容例如以下： <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-pe

PC端上傳頭像及裁剪功能

基於vue框架藉助elementUI框架做為上傳元件藉助vue-cropper做為裁剪工具話不多說，先看效果：上傳頭像元件： <div class="app-head"> <h3>小程式頭像<

【java小程式】上傳頭像的功能實現。

上傳頭像小程式端的頁面程式碼和前面的登出程式碼一樣，可以去【java小程式實戰】小程式登出功能實現檢視文章目錄小程式端的js實現（mine.js) java後臺程式碼： 1、UserService介面

移動端上傳頭像並裁剪功能(h5)

charset 移動端 error max cli alert initial port round <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

微信小程式上傳圖片功能（附後端程式碼）

幾乎每個程式都需要用到圖片，在小程式中我們可以通過image元件顯示圖片。當然小程式也是可以上傳圖片的，微信小程式文件也寫的很清楚。上傳圖片首先選擇圖片通過wx.chooseImage(OBJECT)實現官方示例程式碼 ? 1 2

thinkphp3.2.3 ueditor1.4.3 圖片上傳操作,線上刪除上傳圖片功能。

<?php namespace PublicClass; /** * Ueditor外掛 * @author Nintendov */ class Ueditor { //public $uid;//要操作的使用者id 如有登入需要則去掉註釋 private $output; //

前後端互動傳值

一.簡析前後端互動 java語言是一種強型別的語言，必須定義型別，然後生成例項，而js卻不是，雖然它也是面向物件的，但是它並沒有先定義類這一種概念（但是js也有型別），它是基於原型的一種模式，和java完全不同。很顯然，二者的原理，機制，語法並不能相容。二者產生的物件並不能

H5移動端剪下上傳頭像

移動端比如app，ios，微信，H5頁面開發過程中很多人都會遇到更換頭像的需求，這時我們需要實現點選頭像選擇相簿圖片或者拍照，然後對圖片進行壓縮裁剪，然後進行提交上傳，到更換頭5像的效果。話不多說，上傳效果圖：

Android實現檔案，圖片上傳，以及服務端接收相關。

前面一篇文章寫了實現照相功能的一個例子，其實那個實現效果是個略縮圖。要檢視全圖就要先指定照片的存放路徑。以後我會修改那個文章。今天先說下圖片，檔案等上傳的實現。接著拿照片說事，光照完了不行還得往伺服器上傳。我們做web開發的時候幾乎都是通過一個表單來實現上傳

uploadify+jcrop實現頭像上傳裁剪功能

因為無法debug，斷斷續續幾天才搞定首先載入各個js和css，都在官網下載~ uploadify.css jcrop.css jquery.js jquery.uploadify.min.js jcrop.js 步驟：uploadify上傳圖片，得到圖片路徑在前臺顯示

Libcurl的初步實現tfp上傳下載功能

rtmp 細致 helib art download close 2.3 article 可能該學習筆記的目標是利用libcurl實現ftp文件上傳和下載功能一、Libcurlde的簡單介紹 Libcurl是一個免費的而且易於使用的利用url進行文件傳輸的庫。,

上傳文件按鈕美化，上傳文件前後狀態控制

http val lee 圖片 html return hid jpg 按鈕我們在做input文本上傳的時候，html自帶的上傳按鈕比較醜，如何對其進行美化呢？同理：input checkbox美化，input radio美化是一個道理的. input file上傳按鈕

flask 上傳頭像

file turn col log {} str 文件 and quest 上傳頭像，自己感覺了好久，就是上傳文件唄其實，存在一個路徑，數據庫存儲這個路徑，然後展示給前端，啥都不說，看怎麽實現的。數據庫設置如下 user_image=db.Column(d

使用HttpRequest.Files 獲取上傳文件，實現上傳附件功能

post 分享 new 失敗 light 查看 continue 存在 nbsp 使用HttpRequest.Files 獲取上傳文件，實現上傳附件功能，不同瀏覽器會有差異：獲得在 Google 瀏覽器上傳後得到的 HttpRequest.Files (客戶端上載文件

rsa加密算法，前後端實現。

exceptio eof 測試 ror iic shm rsa加密算法 pac puts 前端js: 　　下載地址：http://travistidwell.com/jsencrypt/ js第一版本： 1 // 對數據加密 2 function e

上傳頭像功能的前後端互動。

相關推薦