node+multiparty+ajax 上傳圖片並保存到數據庫
阿新 • • 發佈：2019-04-20
utf href create formdata 狀態 tst jquery field cnp
1、html 部分
<!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/[email protected]/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>
2、node部分 需要安裝一下插件
cnpm install express mysql multiparty --save
3、nodejs代碼實現
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) {// 1、fields:獲取表單的數據 2、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!‘));
4、mySql.js
module.exports={ db:{ host: ‘localhost‘, user: ‘root‘, password: ‘******‘, port: ‘3306‘, database: ‘數據名稱‘ } };
node+multiparty+ajax 上傳圖片並保存到數據庫