快捷導(dǎo)航

詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)

更新時間：2018年08月10日 10:15:45 作者：ZONE_98F

這篇文章主要介紹了詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯的，現(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)我們點擊label的時候，也就點擊了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

代碼運行，成功將圖片上傳到了指定目錄

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決ant-design-vue中menu菜單無法默認(rèn)展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認(rèn)展開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue組件是如何解析及渲染的？
這篇文章主要介紹了vue組件是如何解析及渲染的？，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-01-01
基于Vue3實現(xiàn)視頻播放與截圖功能
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實現(xiàn)簡單的視頻播放與截圖功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04
如何換個角度使用VUE過濾器詳解
這篇文章主要給大家介紹了如何換個角度使用VUE過濾器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用VUE具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue3?計算屬性的用法詳解
學(xué)過?vue2?的寶子們應(yīng)該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高。本文就來為大家介紹一下Vue3中計算屬性的用法，需要的可以參考一下
2022-07-07
Vue實現(xiàn)動態(tài)顯示表單項填寫進(jìn)度功能
這篇文章主要介紹了Vue實現(xiàn)動態(tài)顯示表單項填寫進(jìn)度功能，此功能可以幫助用戶了解表單填寫的進(jìn)度和當(dāng)前狀態(tài)，提高用戶體驗，通常實現(xiàn)的方式是在表單中添加進(jìn)度條，根據(jù)用戶填寫狀態(tài)動態(tài)更新進(jìn)度條，感興趣的同學(xué)可以參考下文
2023-05-05
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細(xì)的代碼講解和實現(xiàn)思路,講解的非常詳細(xì),有需要的朋友可以參考下
2023-08-08
Vue 中 reactive創(chuàng)建對象類型響應(yīng)式數(shù)據(jù)的方法
在 Vue 的開發(fā)世界里,響應(yīng)式數(shù)據(jù)是構(gòu)建交互性良好應(yīng)用的基礎(chǔ),之前我們了解了ref用于定義基本類型的數(shù)據(jù),今天就來深入探討一下如何使用reactive定義對象類型的響應(yīng)式數(shù)據(jù),感興趣的朋友一起看看吧
2025-02-02
詳解Vue-Router源碼分析路由實現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05