基于element实现文件（资源）上传

自定义上传规则按需定义：

1.总大小不可超出200M

2.文件上传不重复

3.支持文件格式（ "mp4", "MP4", "mov", "MOV","mp3","MP3","jpg", "JPG","png","PNG","jpeg","JPEG","bmp",

"BMP","txt", "TXT","text","TEXT","doc", "DOC","docx","DOCX","xls","XLS","xlsx", "XLSX",

"ppt", "PPT","pptx", "PPTX", "pdf", "PDF"）

4.最多可选10个文件

5.图片不可超出10M

多种文件上传时需要后端支持把文件编译成前端能浏览的！

上传代码

<template><div class="ceshi"><div class="top"><span class="title">资源</span><!-- <el-button>从课表选择</el-button> --></div><div class="content"><el-form ref="form" :rules="formrules" :model="form" label-width="100px"><el-form-item label="附件" class="file_updata"><div class="text_form"><divclass="datanull"v-if="form.eduCloudLiveResoureList.length < 1"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-shangchuan2"></use></svg><p>最多可选择10个文件</p></div><ul v-else><li@click.stop="preview(index, 'file')"v-for="(files, index) in form.eduCloudLiveResoureList":key="files.id"><svgclass="icon deletefile"@click.stop="deletefile(files, index)"aria-hidden="true"><use xlink:href="#icon-a-GroupCopy8beifen"></use></svg><divv-if="files.fileSuffix == 'jpg' ||files.fileSuffix == 'png' ||files.fileSuffix == 'jpeg' ||files.fileSuffix == 'bmp'"><img :src="files.convert_path" alt="" /></div><!-- 视频 --><divv-if="files.fileSuffix == 'MP4' ||files.fileSuffix == 'mp4' ||files.fileSuffix == 'mov'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-bianzu23"></use></svg></div><!-- 音频 --><divv-if="files.fileSuffix == 'MP3' || files.fileSuffix == 'mp3'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-PPT1beifen5"></use></svg></div><!-- 文本档 --><divv-if="files.fileSuffix == 'text' || files.fileSuffix == 'txt'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-GroupCopy5"></use></svg></div><!-- xls --><divv-if="files.fileSuffix == 'xls' || files.fileSuffix == 'xlsx'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-Group52"></use></svg></div><!-- docx --><divv-if="files.fileSuffix == 'doc' || files.fileSuffix == 'docx'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-Group23"></use></svg></div><!-- PDF --><divv-if="files.fileSuffix == 'PDF' || files.fileSuffix == 'pdf'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-a-Group7"></use></svg></div><!-- ppx --><divv-if="files.fileSuffix == 'ppt' || files.fileSuffix == 'pptx'"><svg class="icon myIconStylea" aria-hidden="true"><use xlink:href="#icon-Group6Copy"></use></svg></div><p>{{ files.fileName }}</p></li></ul></div><el-uploadclass="upload-demo":action="api + uploadVideoUrl":data="mySkyFileParam":headers="Headers":on-error="handlefileerror":on-success="handleupfileOK":before-upload="beforeAvatarUploadexcel":show-file-list="false"name="files"><span class="updatafile"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-Group"></use></svg>添加附件</span></el-upload></el-form-item></el-form></div><div class="yesbtn"><el-button >确定</el-button></div><!-- loading 动画 --><loading class="loadingstat" title="上传中..." v-show="loadingstate"></loading> <!-- 文件预览框 --><filedialogstyle="z-index: 3000"ref="stidemt_preview"v-if="dialogVisible"@esc="esc":img_state="img_state":ind="ind"></filedialog></div>
</template>
<script>
import {  delfileInfo } from "@/api/teaching";//文件删除接口
import { getschoolId, getUuid, getToken,getuserName } from "@/utils/auth";
import filedialog from "@/components/dialog_praticulars";
import loading from "@/components/loading";
export default {components: {loading,filedialog,},data() {return {img_state: "",ind: "",dialogVisible :false,loadingstate :false,api: window.g.BASE_API,uploadVideoUrl: "/edu/previewWorkUp/uploadInteractive",//上传接口// 传参Headers: {access_token: getToken(),},// 传参mySkyFileParam: {fileType: 5,convertType: 1,},form: {eduCloudLiveResoureList: [// 资源// {//     absolutePath: "", // 绝对路径//     relativePath: "",// 相对路径//     rescoureName: "",// 资源名称//     resoureType: "",// 资源类型// }],},formrules: {},};},watch: {},methods: {// 预览preview(index, typea) {this.ind = parseInt(index);this.img_state = typea;this.dialogVisible = true;this.$store.commit("Save_preview", this.form.eduCloudLiveResoureList);this.$nextTick(() => {this.$refs.stidemt_preview.setinitdate();});},// 关闭预览esc() {this.dialogVisible = false;},// 文件上传完成方法handleupfileOK(res, upfileList) {this.loadingstate = false;this.$set(res.data[0], "file_ext", res.data[0].fileSuffix);      //文件类型this.$set(res.data[0], "relativePath", res.data[0].fileAccpath); //相对路径this.$set(res.data[0], "absolutePath", res.data[0].fileAllpath); //绝对路径this.$set(res.data[0], "convertpath", res.data[0].convertPath);  //文件解析后的路径不解析的返回相对路径this.$set(res.data[0], "rescoureName", res.data[0].fileName);    //资源名称this.$set(res.data[0],"convert_path",this.api + "/resDir"+ res.data[0].convertpath);if (res.code === 200) {this.form.eduCloudLiveResoureList.push(res.data[0]);this.$message({message: "上传成功",type: "success",center: true,});}},// 删除上传文件deletefile(item, index) {if (this.term == 1) {//编辑}else{//  创建let list = []list.push(item.resId)delfileInfo({ fileId:list}).then(res=>{ })  }this.form.eduCloudLiveResoureList.splice(index, 1);},handlefileerror(res) {this.loadingstate = false;this.$message({message: "上传失败",type: "error",center: true,});},// 附件上传文件处理支持格式beforeAvatarUploadexcel(file) {this.fileMaxSize += file.size; /// 1024 / 1024;if (this.fileMaxSize / 1024 / 1024 > 200) {this.fileMaxSize -= file.size;this.$message({message: "附件不可超出200M",type: "warning",center: true,});this.loadingstate = false;return false;}// 文件上传重复let repetition= 0this.form.eduCloudLiveResoureList.forEach((itme,index)=>{if (itme.fileName==file.name) {this.$message({message: "文件上传重复",type: "warning",center: true,});this.loadingstate = false;repetition = 1;return false}})if (repetition) { return false}let index = file.name.lastIndexOf(".");let extension = file.name.substr(index + 1);let extensionList = ["mp4","MP4","mov","MOV","mp3","MP3","jpg","JPG","png","PNG","jpeg","JPEG","bmp","BMP","txt","TXT","text","TEXT","doc","DOC","docx","DOCX","xls","XLS","xlsx","XLSX","ppt","PPT","pptx","PPTX","pdf","PDF",];let extensionList_IMG = ["jpg",'JPG', "png",'PNG', "jpeg",'JPEG', "bmp",'BMP'];const isLt2M = file.size / 1024 / 1024 < 200;if (!isLt2M) {this.$message({message: "附件不可超出200M",type: "warning",center: true,});this.loadingstate = false;return false;} else if (extensionList.indexOf(extension) < 0) {this.$message({message: "当前文件格式不支持",type: "error",center: true,});this.loadingstate = false;return false;} else {if (this.form.eduCloudLiveResoureList.length==10) {this.$message({message: "最多可选10个文件",type: "error",center: true,});this.loadingstate = false;return false;}}if (extensionList_IMG.indexOf(extension) >= 0) {if (file.size / 1024 / 1024 > 10) {this.$message({message: "图片不可超出10M",type: "warning",center: true,});this.loadingstate = false;return false;}} this.loadingstate = true;},},created() {},
};
</script><style lang="stylus" rel="stylesheet/stylus" scoped>
@import './index.styl';
</style>

基于element实现文件（资源）上传 - 好用相关推荐

优秀教程：创建基于 Ajax 的文件拖放上传功能
分享来自 Tutorialzine 的优秀教程--创建基于 Ajax 的文件拖放上传功能,结合 jQuery File Upload 插件和 jQuery Knob 插件实现漂亮的 CSS3/JS 驱 ...
vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
拖拽文件夹上传一（基于Vue的文件夹上传组件）
前言首先说一下,小弟第一次写文章,如果有什么错误还望小哥哥小姐姐多多包涵.如果有什么缺陷还望大家指出来让小弟多学习. 内容划分上传文件夹一共分两部分来写一方面怕太长了大家看五分钟就不想看 ...
html上传文件_.NET基于WebUploader大文件分片上传、断网续传、秒传
(给DotNet加星标,提升.Net技能) 转自:学习中的苦与乐 cnblogs.com/xiongze520/p/10412693.html 现在的项目开发基本上都用到了上传文件功能,或图片,或文档 ...
vue基于element时间日期组件上传多个时间转字符串（限制今天以前不能选）
html <el-form-item label="最晚到货时间" prop="project_time2" size="small" ...
Git入门之命令行删除文件及上传大文件至Github（二）
自2013年开始,作者的代码基本是分享到CSDN下载区,最早设置均是免费的,但随着下载量增加,分数自动增长.为了更好地分享开源代码及相关工具,赶上时代潮流,作者后续会将代码分享至Github和CSDN ...
大文件分片上传前端框架_基于Node.js的大文件分片上传
基于Node.js的大文件分片上传我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳 ...
layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件（与数据库挂钩） - 爱秧博客...
写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
Spring MVC-09循序渐进之文件上传(基于Servlet3.0+Html5客户端上传文件)
示例测试源码虽然Servlet3.0+中上传文件,我们在服务端编程即可非常容易,但是用户体验却不是非常友好.单独的一个HTML表单并不能显示进度条,或者显示已经成功上传的文件数量. 不管是Jav ...

基于element实现文件（资源）上传 - 好用

基于element实现文件（资源）上传 - 好用相关推荐

最新文章

热门文章