Vue+axios+Node+express如何實現(xiàn)文件上傳

小編給大家分享一下Vue+axios+Node+express如何實現(xiàn)文件上傳，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出吳橋免費做網(wǎng)站回饋大家。

Vue 頁面的代碼

 
 修改頭像

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)
    })
  }
 }

1. 在這里我并沒有用form方式，而是將input隱藏，用label綁定input，當(dāng)我們點擊label的時候，也就點擊了input

2. 我將請求封裝在了另一個文件里，為ChangeAvatar()函數(shù)，如果不封裝，按常規(guī)寫法一樣是可以的

3. Form.append('avatar', img, this.avatar_name);第一個參數(shù)為input的name,第二個參數(shù)為文件對象，第三個參數(shù)為文件的名字

4. 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

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

以上是“Vue+axios+Node+express如何實現(xiàn)文件上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：Vue+axios+Node+express如何實現(xiàn)文件上傳
文章路徑：http://m.jiaotiyi.com/article/gsssji.html