前端上传文件 ajax发送FormData,后端如何接收

前后端分离且跨域的情况下

form表单提交数据,且数据中包含文件提交上传
  • 解决方法 及 步骤:

    1 前端用formdata()的方式提交

     let form=document.getElementById('form')
      var param = new FormData(form);
        let config = {
        //添加请求头
        headers: { 'Content-Type':'multipart/form-data'}
      };
      // 拿到file
      console.log(this.fileval);
      //  获取form所有数据
       const instance=axios.create({
          withCredentials: true
         })
      console.log(param);
      instance.post('http://localhost:8090/insertWare',param,config).then(res => {
        console.log(res);
      });
    

    2 后端用 MultipartFile方式接收file数据,其他数据和正常数据一样

        public Map<String, Object> insertWare(@RequestParam("file") MultipartFile[] files,
                                         Integer user_id,
                                         String course_name,
                                         String major,
                                         Integer isuser
    ) throws Exception {
       Map<String, Object> map = new HashMap<>();
       for (MultipartFile file : files) {
           //获取原始文件名
           String ware_name1 = file.getOriginalFilename();
           System.out.println("原始文件名:" + ware_name1);
           //新文件
           String ware_name = UUID.randomUUID() + ware_name1;
           //获取项目路径
       <!-- ServletContext context = request.getSession().getServletContext(); -->
           //获取上传文件的保存目录,将上传的文件存放于WEB-INF目录下
           // 不允许外界直接访问,保证上传文件的安全
           String address = "D:\\project\\vue-admin-master\\static\\";
           File filex = new File(address);
           if (filex.exists() && filex.isDirectory()) {//若上传目录不存在,则创建目录
               filex.mkdirs();
           }
           String message = "";
           InputStream is = null;
           FileOutputStream fos = null;
           byte[] buffer = new byte[100 * 1024];//根据上传文件大小设定
           try {
               is = file.getInputStream();// 获得上传文件流
               //创建文件输出流  使用FileOutputStream打开服务器端的上传文件
               fos = new FileOutputStream(address + ware_name);
               int len = 0;
               //开始读取上传文件的字节,并将其输出到服务端的上传文件输出流中
               //循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据
               while ((len = is.read(buffer)) > 0) {
                   fos.write(buffer, 0, len);//写入到指定的目录当中
               }
               fos.flush();
               is.close();
               fos.close();
               message = "上传成功!" + "<br>";
               message += "上传内容:" + ware_name + "<br>";
               System.out.println("上传内容:" + ware_name + "<br>");
           } catch (IOException e) {
               message = "文件上传失败!";
               throw new Exception(e);
           }
           int code = wareService.insertWare(user_id,major, course_name, address, ware_name, isuser);
    
           if (code == 1) {
               map.put("success", "添加ware成功:" + code + "-" + message);
           } else {
               map.put("error", "添加ware失败:" + code + "-" + message);
           }
       }
           return map;
       }
    
    

    在这里插入图片描述

  • 16
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 前端通过formdata的方式上传文件,可以使用表单文件控件或者通过js代码创建formdata对象进行上传。对于表单控件上传,需要在form标签中设置enctype属性为multipart/form-data,然后在input标签中设置type属性为file,这样即可将文件存储在formdata对象中。如果通过js代码创建formdata对象,直接通过append方法将文件添加到对象中,如下所示: ``` let formData = new FormData(); formData.append('file', file); ``` 其中,file为需要上传的文件对象。 后端使用koa-body中间件可以方便地处理上传的文件。先要在koa应用中使用该中间件,然后通过ctx.request.files获取上传的文件,如下所示: ``` const Koa = require('koa'); const koaBody = require('koa-body'); const app = new Koa(); app.use(koaBody({ multipart: true, // 支持文件上传 formidable: { maxFileSize: 200*1024*1024, // 设置上传文件大小,默认2M } })); app.use(async (ctx) => { const file = ctx.request.files.file; console.log(file.name, file.size); // 打印上传的文件名和大小 ctx.body = '上传成功'; }) ``` 其中,multipart设置为true表示支持文件上传,formidable对象中的maxFileSize表示最大上传文件大小,默认为2M。在处理上传的文件时,获取文件对象通过ctx.request.files即可,可以获取文件名、类型、大小等信息。最后,需要设置返回的数据为上传成功即可。 ### 回答2: 前端在实现文件上传的过程中,需要使用到formdata对象,formdata对象可以支持上传文件、文本信息以及表单数据等。要进行文件上传,需要注意选择文件类型的input的属性设置为"file",然后通过formdata对象将文件添加到数据中,在使用Ajax等技术将数据发送后端。在使用formdata上传文件时,需要注意不同浏览器之间formdata对象的兼容性,可以使用polyfill等技术来进行统一。 对于后端的Koa框架来说,接收上传的文件可以使用koa-body中间件。koa-body中间件可以接收文件、文本信息以及表单数据等,可以将上传文件保存在指定的路径下,并且将上传的文件信息添加到ctx.request.body中进行统一管理。在使用koa-body中间件时,需要注意对于文件大小、上传路径、文件格式等进行配置管理,以免出现上传失败或者数据丢失的情况。 除此之外,如何管理和处理上传的文件也是需要考虑的重点,可以考虑使用nodejs中的fs模块进行文件操作,或者使用第三方插件如multer等来进行统一管理。在处理上传的文件时,还要注意对于文件大小、路径、格式进行校验和处理,以确保数据的有效性和安全性。 ### 回答3: 前端使用Formdata上传文件,示例如下: ``` const formData = new FormData() formData.append('file', file) axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => { console.log(res.data) }) ``` 后端使用koa-body来接收上传的文件,示例如下: ``` const Koa = require('koa') const koaBody = require('koa-body') const app = new Koa() app.use(koaBody({ multipart: true, formidable: { uploadDir: './uploads', // 上传文件保存的路径 keepExtensions: true, // 保留文件扩展名 maxFieldsSize: 2 * 1024 * 1024 // 最大文件大小为2MB } })) app.use(async (ctx) => { const file = ctx.request.files.file console.log(file) // 处理文件逻辑 }) app.listen(3000) ``` 其中,koa-body需要设置multipart为true,表示支持文件上传,formidable则可以设置一些参数,如uploadDir表示文件保存的路径,keepExtensions表示是否保留文件扩展名,maxFieldsSize表示最大文件大小,可以根据需要进行调整。在处理请求时,可以通过ctx.request.files.file获取上传的文件信息,然后进行相应的业务逻辑处理。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值