后台管理系统之图片上传功能

 

此案例是基于nodejs开发的一个操作banner图后台管理系统 具体功能详解如下

　　1、文件上传功能

　　　　1-1、前端操作

　　　　　　　首先文件上传我们利用了input框的h5特性 file

　　　　　　　

　　　　　　　

　　　　　　　//此时需要注意的地方是 我们设置了axios的拦截 在处理post请求的将所有的参数转成了字符了 而这个文件上传则不需要，所有要排除这种情况

 1 //此文件主要处理axios服务拦截
 2 import qs from "qs"
 3 import axios from "axios";
 4 
 5 import {
 6   getCookeies
 7 } from "@/utils/cookie"
 8 
 9 const request = axios.create({
10   //判断是开发环境还是生产环境
11   timeout:9000,
12   baseURL: process.env.NODE_ENV === "development" ? "/api" : "", //因为api这个前缀是我们在开发环境使用的
13   //真实上线是去掉的 但是我们又不能每次上线开发都要改n个接口去 
14   //所以可以在这里统一给其加上这个前缀
15 
16   //然后接下来就把公共参数统一放在header里面
17 
18   //这样直接发送的话会造成第一次登录后token为空  因为代码执行了一遍
19   //所以此时就需要拦截器了
20   // headers:{
     
21   //     token:getCookeies()||$store.state.login.token
22   // }
23 })
24 
25 
26 //通过请求拦截我们在给其添加共同的请求头放上token字段
27 
28 //所谓的请求前拦截就是不管什么请求在发送的时候都会执行一下这个方法
29 //我们除了可以在这里添加公共的请求头信息以外 还可以放在loading一类的
30