vue上傳圖片

vue上傳圖片，組件用element-ui上傳組件

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

其中：action 采用綁定的形式，表示上傳的接口地址，api :配置跨域時的接口

:action = "/api/+'upload'"

axios.defaults.baseURL = '/api';

 on-success 上傳成功之后。。。

 before-upload 上傳之前。。。，比如驗證，大小，尺寸

上傳接口配置完成后，上傳一張圖片，可以看到有一個請求，查看請求地址，無問題

 

 看到有一個數據Form Data，已經把圖片轉成了二進制數據，把數據傳到服務器了，接下來寫服務器

 

 

// 獲取上傳文件，但 express 本身沒有能力獲取到上傳文件的數據，因此要一個中間件專門用來獲取上傳文件 npm i multer
const express = require('express');
const path = require('path');

const multer= require('multer');
// 上傳中間件，dest：目標地址  __dirname：當前文件所在文件夾，絕對地址,將來上傳的圖片二進制文件保存在此處
const upload = multer({dest:__dirname + '/../../Public/uploadAvatars'});

// const user = require('../../models/Users/user');

const UploadAvatar = express.Router();

//file 就是前段上傳圖片的 Form Data
//  express 本身沒有req.file，加了中間件，把數據賦值到req上，才有了req.file
UploadAvatar.post('/upload',upload.single('file'),async (req,res) => {
    const file = req.file;
    res.send(file)
});

module.exports = UploadAvatar;

服務器寫好，上傳圖片，可以看到有圖片信息在里邊，包括路徑，大小，filename等

 

 再看服務器，已經有一個圖片二進制文件了，就是剛上傳的圖片

 

 接下來，就是把這張圖片以URL的形式返回給客戶端

首先，存放在服務器的二進制文件要能被訪問到，所有要開放出來

// 開放靜態文件
app.use('/Public',express.static(__dirname + '/Public'));

然后在服務器端，還是上面的接口里，但這次多了一個自己拼出來的URL，通過URL客戶端就可以訪問到圖片

UploadAvatar.post('/upload',upload.single('file'),async (req,res) => {
    const file = req.file;
    file.url = `http://localhost:3000/uploads/${file.filename}`;
    res.send(file)
});

 

 可以看到，數據里多了一個URL

前端，將URL賦值給 組件中的imageUrl

      afterUpload(res){
        this.imageUrl = res.url
      }