node+multiparty+ajax 上傳圖片並保存到數據庫

時間 2019-12-08

標籤 node+multiparty+ajax node multiparty ajax 上傳圖片保存數據庫欄目 Ajax 简体版

原文原文鏈接

一、html 部分css

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <title>上傳圖片</title>
</head>
<body>
<div class="container">
  <input  type="file" name="images" onchange="fileUpload(this)">
  <button class="btn btn-info" style="margin-top:20px" onclick="uploadPictures()">上傳圖片</button>
  <!--獲取服務返回圖片數據-->
  <div>
    <img class="img"   src="" alt="">
  </div>
</div>
<script>
  var fileImg;
  //讀取圖片
  function fileUpload(_this) {
    var fileReader = new FileReader();//建立文件讀取對象
    fileImg = _this.files[0];//獲取file組件中的文件
  }
  //上傳圖片
  function uploadPictures() {
    var formData = new FormData();
    formData.append("username", "zhangsan");
    //圖片
    if (fileImg != null) {
      formData.append("image", fileImg);
    }
    $.ajax({
      url: 'http://127.0.0.1:8888/uploadimg',
      type: 'post',
      data: formData,
      async: true,
      processData: false,
      contentType: false,
      contextType: "application/json",
      success: function (res) {
        var res = JSON.parse(res);
        console.log(res);
        $('.img').attr('src', res.result[0].imgUrl);
      },
      error: function (err) {
        console.log(err);
      }
    });
  }
</script>
</body>
</html>

二、node部分須要安裝一下插件 html

 cnpm install express mysql multiparty  --save

三、nodejs代碼實現node

const express = require('express');
let mysql = require("mysql");
var multiparty = require('multiparty');//獲取上傳的圖片功能
const path = require('path');
const app = express();
let settings = require("./src/js/mySql.js");

//設置跨域訪問
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1');
  res.header("Content-Type", "text/plain");
 // res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

/********************************************上傳圖片*********************************************/

//注意：在客戶端提交的時候
//html頁面form 表單要加入 enctype="multipart/form-data"
//可是 ajax 不須要加入
//  靜態文件的託管，在 upload 目錄下找到圖片
//  訪問地址 http://127.0.0.1:8888/public/upload/images/XXXXXXXXXXX.jpg
app.use('/public/upload/images',express.static('public/upload/images'));

// 要返回的 json 數據
var myResult = {
  versionName: '4.1.6',
  versionCode: '340',
  status: '0', // 響應狀態 0-成功，非0-錯誤碼
  errorMessage: '成功',
  exception: 'xxxxxx', // 異常描述
  result: [{}]

}; //獲取表單提交的數據 以及post過來的圖片 app.post('/uploadimg',function(req,res){ var form = new multiparty.Form(); form.uploadDir='public/upload/images'; //上傳圖片保存的地址(目錄必須存在) form.parse(req, function(err, fields, files) {// 一、fields:獲取表單的數據 二、files：圖片上傳成功返回的信息 myResult.result[0].code = "200"; myResult.result[0].message="success"; myResult.result[0].imgUrl='http://127.0.0.1:8888/'+files.image[0].path res.send(myResult); var url='http://127.0.0.1:8888/'+files.image[0].path; /***********************************************數據庫鏈接**********************************************************/ let connection = mysql.createConnection(settings.db); connection.connect(); let addSql = 'INSERT INTO userImage(userId,imgUrl) VALUES(0,?)'; //增 connection.query(addSql,url,function (err, result) { if (err) { console.log('[INSERT ERROR] - ', err.message); return; } console.log('INSERT ID:', result); }); connection.end();//關閉數據庫鏈接池  }); }) app.listen(8888, () => console.log('Example app listening on port 8888!'));

四、mySql.jsmysql

module.exports={
  db:{
    host: 'localhost',
    user: 'root',
    password: '******',
    port: '3306',
    database: '數據名稱'
  }
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。