在线教育项目1--使用element-ui配合springboot oss上传文件/视频到阿里云oss
2020-04-24 10:34
781 查看
1前端代码:
<template> <div class="newWorkForm"> <!--新增通知对话框--> <el-dialog title="新增作业" :before-close="handleClose" :visible.sync="dialogVisible" width="50%" v-loading="loading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm" > <!--文件基础内容--> <el-form-item label="发布者姓名" prop="uname"> <el-input v-model="Form.uname"></el-input> </el-form-item> <el-form-item label="文件备注" prop="name"> <el-input v-model="Form.name"></el-input> </el-form-item> <el-form-item label="文件类型" prop="type"> <el-select v-model="Form.type" placeholder="请选择类型"> <el-option label="图片" value="image"></el-option> <el-option label="视频" value="media"></el-option> </el-select> </el-form-item> <!--文件内容上传区--> <el-form-item label="选择文件" required> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :http-request="uploadFile" ref="upload" :multiple="false" list-type="picture" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm('Form')" >立即发布</el-button > <el-button @click="resetForm('Form')">重置</el-button> </el-form-item> </span> </el-dialog> </div> </template> <script> export default { data() { return { imgsArr:[], loading:false, Form: { uname:"", name:"", type:"", }, rules: { uname: [ { required: true, message: "请输入姓名", trigger: "blur" }, { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }, ], name: [ { required: true, message: "请输入通知内容", trigger: "blur" }, { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }, ], type: [ { required: true, message: "请选择类型", trigger: "blur" }, { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }, ] }, }; }, props: { dialogVisible: { type: Boolean, }, }, inject:["reload"], methods: { uploadFile(file){ this.imgsArr.push(file.file);//往一个数组中添加图片数据 }, handleClose() { this.$emit("cancle"); }, cancle() { this.$emit("cancle"); }, confirm() { this.$emit("confirm"); }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { if(this.imgsArr.length>1){ this.$message.error("请不要上传超过一个文件"); return; } this.loading=true; var formdata=new FormData(); this.$refs.upload.submit(); if(this.imgsArr.length>0){ this.imgsArr.forEach((img,index)=>{ formdata.append(`file`,img);//这里用到index++,防止前面添加的图片被后面的覆盖,下面后端代码有讲如何循环这个数组 }) }else{ this.$message.error("请同时附上相应文件"); return; } formdata.append("uname",this.Form.uname); formdata.append("name",this.Form.name); formdata.append("type",this.Form.type); formdata.append("courseId",1); let config = { headers: { 'Content-Type': 'multipart/form-data' } }//设置请求头! console.log(formdata.getAll("file")); this.$http.post("/file/addFile",formdata,config).then(res=>{ if(res.data.status==0){ this.loading=false; this.$message.success("发布成功"); this.reload(); }else{ this.$message.error("系统异常,发布失败!"); this.$emit("cancle"); } }) } else { this.$message.error("参数不正确!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, }, }; </script> <style lang="less" scoped> .newWorkForm{ /deep/.el-input__inner{ width: 80%; } } </style>
预览:
二后端java代码:
怎么开启oss服务?百度一下
@RestController @RequestMapping(value = "/file") public class fileController { public static String ENDPOINT = "..你的endpoint"; public static String ACCESSKEYID = "....."; public static String ACCESSKEYSECRET = "......"; public static String BUCKETNAME = "...."; @Autowired fileServer fileServer; public ListeningExecutorService executorService= MoreExecutors.listeningDecorator(Executors.newCachedThreadPool()); @PostMapping(value = "/addFile") public ServerResponse addFile(@RequestParam("file") MultipartFile file,@RequestParam("uname")String uname, @RequestParam("name")String name,@RequestParam("type")String type,@RequestParam("courseId")int courseId) throws Exception { InputStream stream=file.getInputStream(); String filename=System.currentTimeMillis()+file.getOriginalFilename(); OSSClient client=new OSSClient(ENDPOINT,ACCESSKEYID,ACCESSKEYSECRET); PutObjectResult result=client.putObject(BUCKETNAME,type+"/"+filename,stream); client.shutdown(); String url= type+"/"+filename;//这里直接用字符串拼接就能访问oss,但是要先设置公共读 return fileServer.addFile(courseId,uname,url,name, type); } //获取文件列表 @GetMapping(value = "/getFileList/{courseId}") public ServerResponse getFileList(@PathVariable("courseId") int courseId){ return fileServer.getFileList(courseId); } }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue + element-ui + springboot + 阿里云OSS 使用表单进行图片文件等的上传(具有上传滚动条效果)
- 【JAVA-OSS】如何在spring-boot项目中使用oss上传下载文件
- 在线教育项目系列2--使用vedio.js实现在线预览oss图片和视频
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- Springboot 上传文件至阿里云OSS
- 使用阿里云oss存储来进行项目中文件的上传和下载
- Springboot+mybatis集成上传文件至阿里云OSS中,(不经过服务器,直接上传到OSS)
- springboot上传文件到阿里云OSS
- SpringBoot+element-ui进行文件上传
- 使用Gradle构建SpringBoot工程系列:第四篇:项目初始化(编辑build.gradle文件,引入项目基本配置及依赖)
- 使用Spring boot + jQuery上传文件(kotlin)
- 【SpringBoot】使用Stream的方式在SprinBoot项目中读文件内容
- springboot2.0使用google的jib打包镜像上传阿里云
- 大型前后端分离在线教育项目实战SpringBoot,SpringCloud,Mybatis等技术架构
- 使用Spring boot + jQuery上传文件(kotlin)
- Springboot项目关于上传文件的大小限制
- springboot文件上传(1)(项目和文件资源放在同一个服务器上)
- springboot文件上传、下载使用ftp工具将文件上传至服务器
- 解决使用Spring Boot、Multipartfile实现上传提示无法找到文件的问题
- 简单使用使用阿里云对象存储OSS上传文件包括工具类_依赖