使用AJAX上传文件(前后端不分离)

步骤一：在后端数据接口js文件中首先引入处理文件上传的第三方包

//引入处理文件上传的第三方包：
const formidable = require('formidable');
var path = require('path');
var fs = require('fs');
var router = express.Router();
const { v4: uuidv4 } = require('uuid');

步骤二：后端写上传用户头像接口

先捋一下步骤：

① 接收通过ajax请求头发送的JWT数据

② 设置文件上传成功后存放的位置，进行文件上传处理

③ 修改用户头像

//上传用户头像接口
router.post('/userImg',(req,res)=>{
  //接收通过ajax请求头发送的JWT数据
  let jwtData = req.headers.authorization;
  //使用JWT数据
  let userObj = useJWT(jwtData);
  if(!userObj){
    res.send(Msg(501,'非法访问'));
    return;
  }
  //获取文件存放的位置
  let curPath = path.join(__dirname,'../uploads/avatar');
  //uploador:文件上传成功后存放的位置
  let upFile = formidable({multiples: true, uploadDir: curPath});
  //解析请求对象
  //fields:除了上传表单的值
  //files:文件上传表单项的值
  upFile.parse(req,async(err,fields,files)=>{
    //若没有错误，err的值为null，文件上传表单处理成功
    if(!err){
      //获取源文件扩展名,注意要将name改为logo
      let oldFilename = files.logo.originalFilename;
      let fArr = oldFilename.split('.');
      let extName = fArr[fArr.length - 1];//原文件扩展名
      let newFilename = `${uuidv4()}.${extName}`;
      //将上面上传成功的临时文件重命名为正式文件名：
      fs.renameSync(files.logo_writeStream.path,`${curPath}/${nweFilename}`);

      //修改用户头像
      let sql =  `updata e_member set head_photo_url='${newFilename}' where mid='${userObj.uid}'`;

      let [err, arr] = await execSql(sql);
      if (err) {
        res.send(Msg(200, '用户头像更新成功', [{ userimg: `${imgHost}avatar/${newFilename}`}]));
    } else {
        res.send(Msg(500, '用户头像更新失败'));
    }
    }
  });
});

步骤三：前端渲染上传头像界面

 //更换用户头像
    /*
     发送jwt数据：有两种解决方式，第一种是使用隐藏域
    <input type='hidden' name='userJwtData' id='userJwtData'>;
    获取当前的jwt数据
    let jwtData = localStorage['curJWTData'] ? localStorage['curJWTData'] : '';
    将获取到的jwt数据作为隐藏域的值
    $('#userJwtData').val(jwtData);
    此时当用户触发表单就会将隐藏域中的数据发送给服务端；
    */
                //注意如何用ajax发送文件
                /* 
                    1.写一个form表单，将要提交的对象包起来
                    2.发送ajax请求dada为创建表单并将表单里面的数据作为ajax请求的数据
                    3.给input type="file"一个name,name='pic';
                */
                $('.btn_file').change(async function(){
                    $.ajax({
                        url:'http://localhost:3000/userImg',
                        type:'post',
                        //创建表单并将表单里面的数据作为ajax请求的参数
                        data:new FormData($("#curForm")[0]),
                        dataType:'json',
                        //第二种解决方法：通过ajax请求头将JWT数据发送到服务端
                        headers: {
                            Authorization:localStorage['curJWTData'] ? localStorage['curJWTData'] : ''
                        },
                        //设置jquery不处理表单数据
                        processData:false,
                        //设置jquery不处理表单编码,不加的话默认使键值对格式，应该设置为流媒体格式；
                        contentType: false,
                        success(d){
                            alert(d.msg);
                            if(d.status == 501){//非法访问
                                location.href = './loginAndRegister/login.html';
                            }else if(d.status == 500){//头像更新成功
                                $('.myIcon').attr('src', d.data[0].userimg);
                            }
                        },
                        error(e){
                            console.log(e);
                        }
                    })
                });

            }
        }
        userSet();

注意：此处发送JWT数据有两种方式，都了解一下；