正文 

当前位置： 首页 > java > java教程

vue结合element框架实现图片，文件，视频上传(代码片段)

龖龖龖 龖龖龖     2022-12-15     292

关键词：

上传文件的属性修改(这几个是常用，特记录下)：
1.自定义上传（默认为自动上传）
需要设置： :auto-upload=“false”
2. name = ‘appFile’：默认的上传的参数名为file，可以用name属性来修改
3. :data属性是设置自定义的上传参数，默认的上传参数只有file
4. :show-file-list = ‘false’:是否显示已上传文件列表，默认是显示的，不需要的，就可以先隐藏了 5::limit=“1” ：只能上传一个文件或者图片 6: a:accept：accept="‘image/*’"
（设置为只能上传图片，写出来少了个符号，参考下面的图片） b:accept=“application/vnd.ms-excel,
accept=“image/jpg,image/png,image/jpeg” （限定上传图片的 格式）
c:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”
（设置为只能上传文件）

一、上传文件 1）自定义上传（默认为自动上传）：this.$refs.uploadTermExcel.submit();
a.上传文件我写在了change事件中，感觉不太好，建议在单独写个按钮等文件上传了，再提交文件到服务器。

 <el-upload
         ref="uploadTermExcel"
         accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
         :action="uploadTermExcelUrl"
         name = 'appFile'
         :data="参数名：参数值"
         :data="ids: this.$route.params.idCustomer"
         :file-list="termExcelFileList"
         :show-file-list = 'false'
         :before-upload="beforeUpload"
         :on-change="handleUploadTermExcelChange"
         :auto-upload="false">
 	 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 </el-upload>
 //================js=============
computed: 
     uploadTermExcelUrl() 
              return  “上传的地址”
          ,
      ,
handleUploadTermExcelChange(file, fileLis)
	console.log(file, fileList)
   //调用接口，上传到服务器
	this.$refs.uploadTermExcel.submit();

上传图片或者视频
1）自动上传（文件自动上传同理）（默认上传的是二进制的文件）
a.:action=“uploadFileUrlapp”:定义好的上传路径，一般是后台给（如果只是测试，并不是用在项目中，可以用下这个地址（注意：出现跨域问题使用这个网址可以当测试使用
，一般开发时后端会给你链接上传到后台）：https://httpbin.org/post）

<el-upload
       :action="uploadFileUrlapp"
       :data="attachType: 0"
        name = 'appFile'
        :limit="1"
        :accept="'image/*,video/*'" 
         :before-upload = 'beforeuploadMainGraph'
        :on-success="handleSuccessMainGraph"
        :on-preview="handlePreviewMainGraph"
        :before-remove = 'beforeremoveMainGraph'
        :on-remove="handleRemoveMainGraph"
        list-type="picture-card"
        :file-list="imageUrlList">
        <i class="el-icon-plus spc1"></i>
</el-upload>
//图片放大时候用的
<el-dialog :visible.sync="dialogVisibleMainGraph" class='spc12'>
     <img width="100%" :src="imageUrl" alt="">
</el-dialog>

 //================js=============
 data:
 		dialogVisibleMainGraph:false,
 		imageUrlList:[],
 		imageUrl:'',
 
 //用这些方法时候还是建议直接去官网看，更加方便清晰
 //上传前
  beforeuploadMainGraph(file)
  
 //上传成功
  handleSuccessMainGraph(response, file, fileList)
  		this.imageUrlList = fileList;
  
   //点击文件列表中已上传的文件
  handlePreviewMainGraph(file)
   		this.imageUrl = file.url;
   		this.dialogVisibleMainGraph= true;
  
   //删除文件前
  beforeremoveMainGraph(file, fileList)
  
   //删除文件时
  handleRemoveMainGraph(file, fileList)
 	 this.imageUrlList = fileList;

上传的文件转化为base64格式（写在before-upload 事件中）

//转化为base64格式的
  beforeuploadMainGraph(file)
  		 console.log(file)
  		 let _this = this;
  		 let reader = new FileReader();
  		 reader.readAsDataURL(file);
  		 reader.onload = function(e) 
  			 let newUrl = reader.result;    //图片路径
  			 console.log(newUrl) //这个就是base64格式的了

vue结合element实现自定义上传图片文件

参考了很多文献，感谢各位帖子，所以也想把自己遇到不会的东西分享出来，菜鸟一枚大家一进步！    查看详情

vue和element-ui结合的简单使用(代码片段)

...为了主流框架，花点时间稍微了解下vue-cli、vue-router结合element-ui的使用。本人使用的是windows系统，后续介绍以windows7系统为例。1.安装vue-cli首先保证自己电脑上已经安装过nodejs，是否安装打开cmd，输入 node-v，出现图上这个说... 查看详情

vue中vue-i18n结合element-ui实现国际化(代码片段)

...x.js文件内容importVuefrom‘vue‘importVueI18nfrom‘vue-i18n‘importelementEnLocalefrom‘element-ui/lib/locale/lang/en‘importelementZhLocalefrom‘element-ui/lib/locale/lang/zh-CN‘importenLocalefrom‘./en_us‘importzhLocalefrom‘./zh_cn‘Vue.use(VueI18n)constlocalMessages=en:...enLoc... 查看详情

element-ui中el-select与el-tree的结合使用实现下拉菜单(代码片段)

转自  element-ui中el-select与el-tree的结合使用实现下拉菜单 ，更好的浏览体验请访问http://www.kongzid.com目录1、了解Element-UI2、安装ElementUI2.1通过vue-cli创建vue项目2.2安装element-ui组件2.3配置main.js文件2.3.1方式一：引入所有elemen... 查看详情

element-ui中el-select与el-tree的结合使用实现下拉菜单(代码片段)

1、了解Element-UIElementUI是“饿了么”前端出品的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。基于Vue2.x的官网地址：https://element.eleme.cn/#/zh-CN基于Vue3.x的官网地址：https://element-plus.gitee.io/zh-CN2... 查看详情

vue2.0结合element实现select动态控制input禁用

   今天有一个盆友问小颖，怎么实现用select动态控制input禁用，也就是说，input默认是可编辑的，但是每当我选一次select，input就会变成禁用，虽然小颖不知道她为什么这样做，因为小颖觉得为什么不直接把input设置成... 查看详情

element-ui中el-select与el-tree的结合使用实现下拉菜单(代码片段)

转自  element-ui中el-select与el-tree的结合使用实现下拉菜单 ，更好的浏览体验请访问http://www.kongzid.com目录1、了解Element-UI2、安装ElementUI2.1通过vue-cli创建vue项目2.2安装element-ui组件2.3配置main.js文件2.3.1方式一：引入所有elemen... 查看详情

vue+element+springboot实现图片上传(代码片段)

最近没事刚好练习下vue+springboot前段后分离的项目、用上了图片上传功能、记录一下。前端待提交的表单部分代码。<el-form-itemlabel="封面图片"><el-uploadv-model="dataForm.title"class="avatar-uploader":limit&#... 查看详情

vue+element+springboot实现图片上传(代码片段)

最近没事刚好练习下vue+springboot前段后分离的项目、用上了图片上传功能、记录一下。前端待提交的表单部分代码。<el-form-itemlabel="封面图片"><el-uploadv-model="dataForm.title"class="avatar-uploader":limit&#... 查看详情

element+springboot实现简单的商品管理

　　element是饿了么团队开发的PC端用的基于vue的框架，之前在写app端的时候用的是MintUI(饿了么团队)、vux(这个比较好用)。　　element官网： https://element.eleme.cn/#/zh-CN　　在这里直接下载git上别人写好的： vue-admin-template1.下... 查看详情

vue+element实现图片查看器(v-viewer)(代码片段)

需求：让图片轮播的同时实现当用户点击图片，弹出图片的大图预览。大概也就是这样:1.首先安装插件依赖cnpmiv-viewer--save2.在main中引入相关配置importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'Vue.use(Viewer,defaultOpti... 查看详情

vue自定义按钮放在视频文件上

...er--saveplugins文件夹下新建一个video-player.js文件在这里插入图片描述video-player.js里添加以下内容：importVuefrom‘vue’constVueVideoPlayer=require(‘vue-video-player/dist/ssr’)Vue.use(VueVideoPlayer)修改配置文件nuxt.config.jscss下添加：src:‘video.js/dist/v... 查看详情

循序渐进vue+element前端应用开发(12）---整合abp框架的前端登录处理

VUE+Element前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用（如果不知道，请自行补习一下我的随笔：ABP框架使用），ABP框架作为后端，是一个... 查看详情

vue结合elementui实现图片上传可预览，可删除,以base64字符串上传到服务器(代码片段)

图片实现base64上传实现背景实现方式实现代码实现背景图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;但是最近有一个朋友遇到了一个问题,他们没有做图片管理,所以需... 查看详情

前端开发vue+fabric.js+element-plus实现简易的h5可视化图片编辑器(代码片段)

目录前言一、实战效果技术选型核心功能代码实现二、Fabric.js简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态... 查看详情

vue配合iview/element等ui实现界面效果起步(代码片段)

iview与element都是与vue配合使用的ui框架，用法与配置基本一致，在此，我以iview为例，教你如何起步。*首先，你需要有一定的vue基础，如果你还是个小白，可以去我之前介绍如何搭建一个vue项目先看看，点击下面的链接就OK了http:... 查看详情

vue-element组件安装教程

1 引言将Element归类为Vue.js，主要原因为Element是饿了么团队基于MVVM框架Vue开源出来的一套前端ui组件，下面将介绍如何进行vue-element组件的安装。2方法使用HbuilderX搭建一个完整的vue-cil项目框架，通过在cmd窗口下载相关... 查看详情

vue实现element的按需引入(代码片段)

使用Vue-Cli脚手架创建Vue项目实现Element的按需引入安装element-ui和babel-plugin-component和babel-preset-es2015依赖npmintallelement-ui--savenpminstallbabel-plugin-component-Dnpminstallbabel-preset-es2015-D修改.babelrc文件"presets":[["es2015","modules&q... 查看详情