詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
Vue 頁面的代碼
<label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改頭像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="display:none;" accept="image/jpg" @change="changeAvatar" />
axios接口
let ChangeAvatar = (img) => axios({ url: '/user/changeavatar', method: 'post', anync: true, contentType: false, processData: false, data: img })
js部分調(diào)用封裝的接口
methods: { changeAvatar (event) { let img = event.target.files[0]; let size = img.size; if (size > 3145728) { alert('請選擇3M以內(nèi)的圖片!'); return false; } let Form = new FormData(); Form.append('avatar', img, this.avatar_name); API.ChangeAvatar(Form) .then((response) => { console.log(response) }) .catch((error) => { console.log(error) }) } }
- 在這里我并沒有用form方式,而是將input隱藏,用label綁定input,當(dāng)我們點(diǎn)擊label的時候,也就點(diǎn)擊了input
- 我將請求封裝在了另一個文件里,為ChangeAvatar()函數(shù),如果不封裝,按常規(guī)寫法一樣是可以的
- Form.append('avatar', img, this.avatar_name);第一個參數(shù)為input的name,第二個參數(shù)為文件對象,第三個參數(shù)為文件的名字
- ajax new FormData() 方法提交文件時,不能用data:{a:1}的鍵值對方法提交,應(yīng)當(dāng)直接將文件對象提交data:FormData
后臺node代碼
const fileUpload = require('express-fileupload'); app.use(fileUpload()); app.post('/user/changeavatar', function(req, res) { console.log(req.files); // the uploaded file object let avatar = req.files.avatar; // Use the mv() method to place the file somewhere on your server avatar.mv('dist/static/img/avatar/'+req.files.avatar.name+'.jpg', function(err) { if (err) return res.status(500).send(err); res.send('File uploaded!'); }); })
在這里我并沒有用multer,而是用別人的npm包express-fileupload
代碼運(yùn)行,成功將圖片上傳到了指定目錄
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- springboot+vue實(shí)現(xiàn)七牛云頭像的上傳
- vue3?頭像上傳?組件功能實(shí)現(xiàn)
- vue實(shí)現(xiàn)頭像上傳功能
- Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像上傳功能
- 利用nodeJS+vue圖片上傳實(shí)現(xiàn)更新頭像的過程
- Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
- vue中使用axios post上傳頭像/圖片并實(shí)時顯示到頁面的方法
- node+vue實(shí)現(xiàn)用戶注冊和頭像上傳的實(shí)例代碼
- vue+golang實(shí)現(xiàn)上傳微信頭像功能
相關(guān)文章
Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05vue 中 beforeRouteEnter 死循環(huán)的問題
這篇文章主要介紹了vue beforeRouteEnter 死循環(huán)的問題,在文章末尾給大家補(bǔ)充介紹了vue中beforeRouteEnter使用的誤區(qū),需要的朋友可以參考下2019-04-04Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04詳解如何在Vue3使用<script lang=“ts“ setup>語法糖
本文主要介紹了在Vue3使用<script lang=“ts“ setup>語法糖,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-03-03