layui详细文件上传（前后台）

您所在的位置：网站首页 › layui图片上传的接口 › layui详细文件上传（前后台）

layui详细文件上传（前后台）

2023-09-20 03:14| 来源: 网络整理| 查看: 265

文件上传这个功能是做网站必不可少的，layui中的文件上传还是挺不错的，简单实用 1、form表单进行文件上传，中间表单内容我就省略了，注意：enctype设为multipart/form-data

办公用品名称上传附件选择文件立即提交重置

2、js部分，点击上传时进行上传操作；bindAction这个值大家注意点，这个值指向一个按钮触发，你如果是上传多张图片的话可以把这个值指向提交按钮，提交的时候进行文件上传，都是在后台操作，容易存储多张图片的路径，这里因为是一张图片，我是点击的时候直接上传图片，地址由controller返回，赋值为Hidden中.

upload.render({ elem: '#uploadFile', //绑定元素（上传文件的id） url: 'goods/filetoService', //上传接口 method: 'POST', auto: true, accept: 'images',//指定允许上传时校验的文件类型 acceptMime: 'image/*',//规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表 field:'file',//设定文件域的字段名 //bindAction: '#submit', //指向一个按钮触发上传 size: 102400,//限制文件大小10M multiple: false, data:{}, choose:function(obj){ obj.preview(function(index, file, result){ if(file.name.length>0) { choose_file_flag=true; $("#filename").text(file.name); } }); }, before: function(obj) { obj.preview(function(index, file, result){ layer.load(); if(file.name.length>0) { choose_file_flag=true; } }); }, done: function(res, index, upload) {//上传完毕回调 if(isnull&&choose_file_flag){ layer.closeAll('loading'); if(res.code==0){ //上传完成，文件路径进行入库存储 downPath=res.downPath; $("#downPath").val(res.downPath) }else{ // parent.layer.alert(res.info) } } } , error: function() {//请求异常回调 layer.closeAll('loading'); layer.alert('网络异常，请稍后重试！'); } });

3、前台进行验证到底上传没上传图片

form.verify({ isupload: function(value, item){//isupload的是lay-verify="isupload"定义的 if(choose_file_flag==false){ return '请选择文件'; } } });

4、后台的上传接口，NASUtils这个工具类我就不传了，文件服务器类型不同，上传的工具不同，后台主要是接收前台的file，由于是MultipartFile类型，我这边转成了file类型，唯一的问题是转换过程中会在根目录生成该文件，需要删除

//上传图片 @ResponseBody @PostMapping("filetoService") public JSONObject userupimg(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) throws Exception { File file1 = MultiFileUtils.multipartFileToFile(file); //由于文件服务器读取中文乱码，文件名改为数字 String s = "" + (int) ((Math.random() * 9 + 1) * 1000); String name = s + "." + file1.getName().split("\\.")[1]; String downPath = NASUtils.NasUploadFileToFileserver(UUIDGenerator.getUUID(), name, file1); if (!StringUtils.isEmpty(downPath)){//上传成功后需要删除 file1.delete(); } JSONObject jsonObject = new JSONObject(); jsonObject.put("downPath", downPath); jsonObject.put("code", 0); jsonObject.put("msg", "上传成功"); return jsonObject; }

5、MultiFileUtils工具类

package com.project1.utils; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; public class MultiFileUtils { public static File multipartFileToFile(MultipartFile file) throws Exception { File toFile = null; if (file.equals("") || file.getSize() InputStream ins = null; ins = file.getInputStream(); toFile = new File(file.getOriginalFilename()); inputStreamToFile(ins, toFile); ins.close(); } return toFile; } private static void inputStreamToFile(InputStream ins, File file) { try { OutputStream os = new FileOutputStream(file); int bytesRead = 0; byte[] buffer = new byte[8192]; while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) { os.write(buffer, 0, bytesRead); } os.close(); ins.close(); } catch (Exception e) { e.printStackTrace(); } } }

到此就结束了，其实后台接收到file了，剩下的就简单了，找到适合自己文件服务器的工具类

【本文地址】

layui详细文件上传（前后台）

layui详细文件上传（前后台）

今日新闻

推荐新闻