Vue结合Element框架实现图片,文件,视频上传
Posted 龖龖龖
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue结合Element框架实现图片,文件,视频上传相关的知识,希望对你有一定的参考价值。
上传文件的属性修改(这几个是常用,特记录下):
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 实现图片上传可预览,可删除,以base64字符串上传到服务器
vue elementUi中uolad文件上传和v-viewer相结合实现图片的预览下载和删除功能