Element-ui el-upload组件上传功能 前后台
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、前端代码
<el-upload
class="upload-common"
:action= actionUrl
:data=file_info
:before-upload="beforeAvatarUpload"
:on-success="handleSuccess"
accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list=false
multiple
:limit="5"
:on-exceed="handleExceed">
<el-button type="primary" plain size="mini" icon="el-icon-upload" style="width: 75px">上传</el-button>
</el-upload>
2、后端代码
controller
// 处理文件上传
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public @ResponseBody String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request,UploadFileInfo vo) {
String contentType = file.getContentType(); // 图片文件类型
String fileName = file.getOriginalFilename(); // 图片名字
UUID uuid=UUID.randomUUID();
String newfileName = uuid.toString()+fileName.substring(fileName.indexOf('.')); //文件重命名
//文件存放路径
String filePath = "\\\\192.168.9.121\\fileServer\\";
filePath = filePath+ vo.getYwzj() + "\\";
try {
FileUtil.uploadFile(file.getBytes(), filePath, newfileName);//文件处理
vo.setFjmc(newfileName);
vo.setFjlj(FileUtil.AttachmentServerPath +"/"+ vo.getYwzj() + "/" +newfileName);
vo.setKzm(fileName.substring(fileName.indexOf('.')));
vo.setFjwldz(filePath + newfileName);
vo.setXsmc(fileName);
vo.setFjdx(new Long(file.getSize()));
fileUpdataService.save(vo);//文件路径存入表中
} catch (Exception e) {
// TODO: handle exception
}
// 返回图片的存放路径
return FileUtil.AttachmentServerPath +"/"+ vo.getYwzj() + "/" +newfileName;
}
FileUtil
public class FileUtil {
public static final String AttachmentServerPath = "http://192.168.9.121:8088/fileServer";
// 文件上传工具类服务方法
public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath + fileName);
out.write(file);
out.flush();
out.close();
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)