一，（方式一）上傳到專案靜態資料夾

Multer 是一個 node.js 中介軟體，用於處理multipart/form-data型別的表單資料，它主要用於上傳檔案。

注意: Multer 不會處理任何非multipart/form-data型別的表單資料。

前端程式碼：

<div class="head">
        <img
          :src="head_img || '/static/images/read.png'"
          alt=""
          @click="showSheet"
        />
        <input
          ref="uploadImg"
          type="file"
          @change="changeFile"
          class="uploadImg"
          accept="image/*"
        />
      </div>

changeFile(e) {
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("avatar", file);
      formData.append("userId", this.info.id);

      this.$axios
        .post(`/uploadImg`, formData, {
          onUploadProgress: (progressEvent) => {    //axios上傳檔案的程序方法，可以翻api
            //這裡要用箭頭函式,不然這個this的指向會有問題
            this.rate = parseInt(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        })
        .then((res) => {
          if (res.data.state == "success") {
            this.$store.dispatch("getInfo", res.data.data);
            this.info = JSON.parse(localStorage.getItem('userInfo'));
            setTimeout(() => {
              this.$toast(res.data.msg);
            }, 500);
          } else {
            this.$toast({
              message: res.data.msg,
              iconClass: "icon icon-fail",
            });
          }
        });
    },

後端程式碼：

const multer = require('multer')		//express框架上傳檔案所需要的中介軟體
const upload = multer({			//multer中介軟體的使用方法可以看官網
    dest: './uploads/'
})

app.post('/uploadImg',upload.single('avatar'),require('./api/uploadImg')) //上傳頭像

uploadImg.js

const connect = require('../db');

const fs = require('fs');
const uploadImg = (req, res) => {
    let fileName = "";
    const userId = req.body.userId;

    if (req.file != undefined) {
        fileName = new Date().getTime() + "_" + req.file.originalname;

        const oldPath = req.file.path;
        const newPath = "uploads/img/" + fileName;
        fs.rename(oldPath,newPath, err => {//重新命名，加字尾，不然圖片會顯示亂碼，打不開
            if (err) console.log(err);
            insertUserInfo(userId,newPath,res);
        }); 
    }
}

//將頭像地址放到資料庫
function insertUserInfo(id,path,res) {
    connect(`update user_info set head_img = '${path}' where id =${id}`,(err,results,fileds)=>{
        if(err) throw err;
        //更新成功
        if(results.affectedRows === 1){
            //更新使用者資訊返回前端
            connect(`select * from user_info where id = '${id}'`,function (err,results,feild) {
                if(err) throw err;
                if(results.length === 1){
                    res.send({state:'success',msg:'上傳成功',data:results[0]});
                }else{
                    res.send({state:'fail',msg:'發生錯誤',data:null});
                }
            })
        }else{
            res.send({state:'fail',msg:'發生錯誤',data:null});
        }
    })
}

module.exports = uploadImg

傳入的檔案在req.file中，其他的欄位在req.body中

二，（方式二）轉為base64格式存到資料庫

將圖片轉為base64當作欄位值存入資料庫

前端程式碼：

<div class="head">
        <img
          :src="head_img || '/static/images/read.png'"
          alt=""
          @click="showSheet"
        />
        <input
          ref="uploadImg"
          type="file"
          @change="changeFile"
          class="uploadImg"
          accept="image/*"
        />

changeFile(e) {
      let file = e.target.files[0];
      let that = this;
      let base64 = "";
      let reader = new FileReader();
      reader.onload = (function (file) {
        return function (e) {
          base64 = this.result; //這個就是base64的資料了

          //存入資料庫
          that.$axios
            .post("/uploadBase64", { base64: base64, userId: that.info.id })
            .then((res) => {
              if (res.data.state == "success") {
                that.$store.dispatch("getInfo", res.data.data);
                that.info = JSON.parse(localStorage.getItem('userInfo'));
                setTimeout(() => {
                  that.$toast(res.data.msg);
                }, 500);
              } else {
                that.$toast({
                  message: res.data.msg,
                  iconClass: "icon icon-fail",
                });
              }
            });
        };
      })(file);
      reader.readAsDataURL(file);
    },

後端就正常的用post請求接受引數，將整個base64碼存到資料庫即可