您现在的位置是：网站首页> 编程资料编程资料

使用vue和element-ui上传图片及视频文件方式_vue.js_

2023-05-24 357人已围观

简介使用vue和element-ui上传图片及视频文件方式_vue.js_

图片可回显，视频可播放,，这时候全部缓存在页面，并没有提交到后端服务器，只要到用户提交的那一步才确定上传，减低不必要的服务器开支

前端缓存base64方便回显，以及后台上传,视频上传则使用file类型去上传(base64对视频编码会导致请求参数过长)

使用方法：

引入上面的模块，然后在 components里面注册，即可用标签使用

import Upload from "../../../components/utils/Upload.vue"; components: { editor: editor, Upload },

 //这里面的参数在上面的模块里面去看,ref就是你绑定的对象

上传之前获取base64图片编码，存到表单中,然后直接提交给后台

this.addForm.img = this.$refs.addBanner.getPaths();

注意：这里上传后会是一段base64字符串，如果是多图，会是一段字符串数组,后端可以直接用jsonArray接收

//表单