上传文件

enctype:前端设置上传数据的格式

//第一种：键值对
application/x-www-form-urlencoded
//第二种
application/json
//第三种：上传
multipart/form-data

后端接口需要的操作

下载插件
```
npm i multiparty
```

引入插件(表现成/index.js)

//引入path插件
const path = require('path');
//引入multiparty的下载文件插件
const multiparty = require('multiparty');

1.第一句：创建multipary对象，uploadDir：指定上传的文件存放的地址
2.第二局：form.parse
3.上传的name都叫file

配置插件(表现成/index.js)

//文件上传
router.post("/upload", function (req, res) {var form = new multiparty.Form({ uploadDir: "./public/images" });form.parse(req, function (err, fields, files) {if (err) {res.send(err);} else {console.log(files.file);var p = files.file[0].path.substring(files.file[0].path.indexOf("images"));res.send({filename:path.basename(p)});}});
});

commd文件夹里面add.js里面写按钮和图片显示

<button type="button" class="layui-btn" id="uploadBtn"><i class="layui-icon">&#xe67c;</i>上传图片
</button>
<img id="headImg" width="50" height="50" />
<input type="hidden" name="headImg" >

配置上传文件按钮（add.js）

let { $, layer,form,table,upload} = layui;
upload.render({elem:"#uploadBtn",url:"/upload",done(res){console.log("res:",res);//把图片渲染在页面$("#headImg").attr("src","/images/"+res.filename);//设置一个隐藏存放图片的名字$("[name=headImg]").val(res.filename);}
})

把数据存在数据库里面（students.js,model下面的studensModel.js）

//增加学生
router.post('/', async function (req, res) {let { name, age, gender ,cls ,headImg} = req.body;console.log("req.body", req.body);let data = await studentService.add({ name, age, gender ,cls ,headImg});// console.log(data);res.send({ data })
});
// headImg:String,

把图片显示在页面

success(res) {$.ajax({type: "get",url: "/class/all",success(reres) {let str = reres.data.map(item => `<option value="${item._id}">${item.classname}</option>`).join("");// console.log(str);$("[name=recls]").html(str);form.render();console.log(data,data.cls._id,data.headImg);form.val("editContent", {name: data.name,age: data.age,gender: data.gender,recls: data.cls._id});$("#headImg").attr("src","/images/"+data.headImg);upload.render({elem:"#uploadBtn",url:"/upload",done(res){console.log("res:",res);//把图片渲染在页面$("#headImg").attr("src","/images/"+res.filename);//设置一个隐藏存放图片的名字$("[name=headImg]").val(res.filename);}})}});// console.log("res.data.cls",res.data,res.data.cls,res.data.cls.classname);}

上传文件upload相关推荐

angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)
AngularJS - 上传文件( Upload File) 我们提供了上传文件的示例. 为了开发这个应用程序,我们使用了HTML,CSS和AngularJS. 以下示例显示了如何使用AngularJ ...
电脑操作：把文件上传到kindle，kindle上传文件 ,upload文件到kindle
可以上传的格式有: You can send the following file types with Send to Kindle for PC: Microsoft Word (.DOC, .D ...
antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度
antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度于是,在网上搜索解决方案: 第一种解决方案是自 ...
webuploader上传文件，后台Java接收
前台html页面: <!DOCTYPE html> <html> <head> <title>Insert title here</title&g ...
SpringMVC上传文件
首先自我介绍一下,我是王登高,下面是我的头像: 是不是很帅,我每天照镜子都感觉自己帅. 好了不扯这些没用的,我们进入正题:前两天,自己边学边做遇到的SpringMVC上传文件的问题,用户可以上传图片, ...
JS上传文件（base64字符串和二进制文件流）
①以base64字符串上传(使用FileReader对象获取文件的base64字符串) FileReader参考文档: FileReader - Web API 接口参考 | MDN FileRead ...
万能表单解析工具在xheditor上传文件中的应用
利用JadePool中的万能表单解析工具cn.jadepool.web.ProcessForm可以轻松解析表单提交的全部信息,甚至可以轻松获取一个未知结构的表单由那些字段组成.以下是在xheditor ...
uniapp中的上传文件及打开文件
一.先选择文件 let that = this; uni.chooseMessageFile({count: 1,success: res => {console.log(res);//name ...
nodejs + express + multiparty处理上传文件接口：踩坑及总结
文章目录一.简单的文件上传模块接口二.multipart/form-data随着表单上传文件前端后端 1. multiparty 2.connect-multiparty 在平时工作和自己 ...

上传文件upload

上传文件

上传文件upload相关推荐

最新文章

热门文章