jquery结合node js实现图片上传以及图片文件的回显操作

jquery原生实现文件的上传、图片回显、以及后台（node）实现文件的接收存储  

发送请求方式为axios 请求方式为post 

前端使用form表单 与input type=‘file’ 设置form表单enctype属性值为  ‘multipart/form-data’ 

代码

<div id="backimg"></div>

<div class="update-music flexbox">

<form

action=""

enctype="multipart/form-data"

id="upload-file-form"

>

<span class="add-icon">上传</span>

<input type="file" id="upoload-file-content" />

</form>

</div>

引入axios  script文件 （用于发送请求 附上axios 官方文档链接  使用说明 · Axios 中文说明 · 看云）

引入js文件 （推荐在html内容结尾引入 不阻塞html页面加载）

这里使用axios发送请求 所以必须在引入template.js之前引入axios文件

formData方法简介   FormData 对象的使用 - Web API 接口参考 | MDN

FileReader方法简介 FileReader - Web API 接口参考 | MDN

代码

// 封装请求基地址

let saveBaseUrl = 'http://localhost:8090';

// input change事件

$('#upoload-file-content').on('change', function(e) {

let file = $(this)[0].files;

console.log(file);

// 使用formData数据格式发送文件

let formData = new FormData();

formData.append('file', file[0]);

// console.log(formData); //这里直接打印formData数据为空 其实相关数据已经加载 需打印formData的原型来查看数据

// console.log(formData.get('file'));

// 数据拼接完成后 发送请求给后台 //这里自己封装了axios请求的基地址 axios官方有相关请求基地址封装方式 具体方法请查看文档

axios

.post(saveBaseUrl + '/filesUpdate', formData)

.then(res => {

console.log(res);

if (res.errcode === 0) {

// 如果上传并且保存成功就显示上传的文件 这里没有采取回显服务器回显的地址而是用户本机的图片文件 采用FileReader函数读取文件

var fr = new FileReader(),

// 创建div容纳图片

div = document.createElement('div'),

// 创建img标签显示文件

img = document.createElement('img');

div.className = 'pic';

fr.onload = function(e) {

img.src = this.result;

div.appendChild(img);

$('#backimg').append(div);

};

fr.readAsDataURL(file[0]); //读取文件

}else {

console.log('图片上传保存失败');

}

})

.catch(err => {

console.log(err);

});

});

后台接收请求-使用了express、body-parser、connect-multiparty（解析文件）以及sql数据库操作方法 此处未写入数据库（请注意处理跨域等相关问题）

node代码

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

const fs = require('fs');

const path = require('path');

// 存储文件

exports.filesUpdate = (req, res) => {

console.log(req.files.file);

let file = req.files.file;

// 拼接文件名称以及存储路径

var des_file =

path.join(__dirname, '../satatic') + '/' + file.originalFilename;

console.log(des_file);

// 存储文件

fs.readFile(file.path, function(err, data) {

fs.writeFile(des_file, data, function(err) {

let response = {};

if (err) {

console.log(err);

} else {

response = {

errcode: 0,

message: '文件上传成功',

// 返回路径 线上项目的路径与此路径也许不一样 具体路径请自行处理

url: des_file

};

}

console.log(response);

res.end(JSON.stringify(response));

});

});

};

我这里采用了分模块写法 将部分代码分割 这样页面逻辑自认为会清晰点 上面node代码为业务部分 路由部分与业务部分分开 

下面部分为路由部分

const express = require('express');

const router = express.Router();

const multipart = require('connect-multiparty');

let multipartMiddleware = multipart();

const serve = require('./serve');

// 存储首页数据

router.post('/saveData', serve.saveData);

// 文件上传

router.post('/filesUpdate', multipartMiddleware, serve.filesUpdate);

module.exports = router;

如有错误请各位大牛多多指正交流