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实现自定义上传图片文件

Vue结合element ui 实现图片上传可预览,可删除,以base64字符串上传到服务器

vue elementUi中uolad文件上传和v-viewer相结合实现图片的预览下载和删除功能

改造vue-quill-editor: 结合element-ui上传图片到服务器

vue基于element实现文件上传

Vue和element-ui结合的简单使用