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

Posted 2021-09-10 龖龖龖

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