前端全栈入门（一）Vue+nodejs（express）实现文件上传

.progress-wrap{宽度：300px；p{宽度：100%；}.progress{背景颜色：#c5c8ce；高度：20px；跨度{显示：块；背景色：#19be6b；高度：100%；宽度：0；}}}Vue+Nodejs实现图片上传图片上传在正常的业务开发中应该算是一个标准需求，这里简单的使用Vue和Nodejs实现需求流程图（简单画一个）使用vue-cli创建最简单的vue项目确保vuecli是最新的。如果不确定，可以执行2行命令npmuni-gvue-clinpmi-g@vue/clivuecreateimage-uploaderUsecustomtocreateVueCLIv3.11.0?请选择一个预设：default(babel,eslint)?手动选择功能和选择选项时，需要选择基本配置VueCLIv3.11.0？请选择一个预设：手动选择功能？检查项目所需的功能：?Babel?TypeScript?ProgressiveWebApp(PWA)Support?Router?Vuex??CSSPre-processors?Linter/Formatter?UnitTesting?E2ETesting修改App.vue中的代码如下.progress-wrap{宽度：300px；p{宽度：100%；}.progress{背景颜色：#c5c8ce；高度：20px；跨度{显示：块；背景色：#19be6b；高度：100%；宽度：0；}}}这样基本的文件上传的表单就写好了，可以通过npmrunserve查看页面效果。创建一个API服务项目mkdirapicdapinpminit-ynpmiexpress-S上面的命令主要是创建一个api文件夹，用npm初始化这个文件夹，遵循nodewebFrameworkexpress；完成以上操作后，就可以编写app.js作为web服务的入口文件了，//app.jsconstexpress=requiree('快递')constport=3000;constapp=express();//处理文件上传请求app.post('/upload',(req,res)=>{res.json({file:req.file})})app.listen(port,()=>{console.log(`api服务启动成功,端口侦听:${port}`)})安装nodemon这是一段让我们修改后台的代码之后自动帮我们启动的工具服务npminodemon-D在package.json//partofpackage.json"scripts":{"dev":"nodemonapp.js"}中配置api服务启动命令，运行服务npmrundev;这时候我们使用post方法http://127.0.0.1:3000/upload，就会得到响应。修改UI项目中的app.js：按ajax库axiosnpmiaxios-D修改app.js代码如下//App.vue.progress-wrap{宽度：300px；p{宽度：100%；}.progress{背景颜色：#c5c8ce；高度：20px；跨度{显示：块；背景色：#19be6b；高度：100%；宽度：0；建筑学;需要解决以下两个问题：由于前后端在不同的端口访问，所以需要解决跨域问题。后端没有相应的文件上传处理。只需npmicorsmulter-S然后修改app.js//app.jsconstexpress=require('express');constcors=require('cors');constmulter=require('multer');constapp=express();app.use(cors());constupload=multer({dest:'./upload'})app.post('/upload',upload.single('file'),(req,res)=>{res.json({file:req.file})})app.listen('3000',()=>{console.log('sds')})OK，这样就完成了整个文件了上传基本功能源码https://gitee.com/xuxuewen/fi...