Vue结合Element框架实现图片，文件，视频上传

Posted 2022-12-15 龖龖龖

上传文件的属性修改(这几个是常用，特记录下)：
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格式的了