项目常用el-upload、a-upload、流文件下载

1、流文件下载

    //有效时长导出
        effectExport() {           
            let query={};//参数
            //CONFIG.httphost()是自己定义的请求方式
            this.$axios.post(
            CONFIG.httphost()+'/exportExcel/exportExcel_valid',query,
            {responseType: "blob"}  //这个记得要定义成blob的响应形式
            )
            .then(response =>{
                this.exportLoading = false;
                const BLOB = response.data; // Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
                const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
                fileReader.readAsDataURL(BLOB); 
                // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
                fileReader.onload = (event) => {
                  // 处理load事件。该事件在读取操作完成时触发
                  // 新建个下载的a标签，完成后移除。
                  let a = document.createElement("a");
                  a.download = `有效时长统计报表.xlsx`;
                  a.href = event.target.result;
                  document.body.appendChild(a);
                  a.click();
                  document.body.removeChild(a);
                };
              })
        },

2、el-upload自动上传

// el-upload 的自动上传
<a-spin :spinning="spinning" tip="上传中"> //a-spin 为antDesign组件的加载组件
 <div class="m-5">
      <el-upload      	
          ref="uploads"
          action="/"
          accept='.xls,.xlsx'
          drag
          multiple
          :http-request="uploadFile"
      >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
  </div>
</a-spin>

//实现方法
 uploadFile( params ){        
      let formData = new FormData();
      formData.append('id', this.itemId);
      formData.append('tableid',this.tableid);
      formData.append('file', params.file);
      this.spinning = true; //formData为接口所需参数
      this.$api.post(`/api/upload`, formData)
      .then( res=>{
          let code = res.code;
          if( code == 0 ){
              this.$refs.uploads.clearFiles();//对已经上传成功的文件列表进行清空操作
              this.successTit('成功', '文件挂接成功');
              this.fileList = [];                              
          }else{
              this.failTit('失败', `文件挂接失败，错误码:${code}`)
          }
      }).catch(err=>{
          thsi.failTit('失败', `文件挂接失败，错误码:${err}`)
      })
      .finally(() => {
        this.spinning = false;
      })
  }

3、el-upload手动上传

<template>
  <el-dialog title="导入Excel"  :visible.sync="visible" @close='handleCancel' :close-on-click-modal='false'  width="30%" >
   <div class="body flex">
      <el-upload
      ref="upload"    
      accept='.xls,.xlsx'
      :auto-upload="false"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :http-request="uploadHttpRequest"
      drag
      action="#"
      :multiple='false'
      :on-success="handleSuccess"
	  :on-error="handleError"
      :on-remove="fileRemove"
      :on-change="fileChange"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        一次只能上传一个xls/xlsx文件，且不超过10M
      </div>
    </el-upload>
   </div>  
    
   <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" :disabled='uploadDisabled' @click="handleSubmit">确定上传</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      uploadType: 1,
      fileList:[],
      uploadDisabled:false,
      tableid:0,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
    };
  },
  methods: {
      show(tableid) {
        this.visible = true       
        this.tableid = tableid
      },
      
      beforeUpload(file) {
          //文件类型
          const isType = file.type === 'application/vnd.ms-excel'
          const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          const fileType = isType || isTypeComputer
          if(!fileType) {
              this.$message.error('上传文件只能是xls/xlsx格式！')
          }
          // 文件大小限制为10M
          const fileLimit = file.size / 1024 / 1024 < 10;
          if(!fileLimit) {
              this.$message.error('上传文件大小不超过10M！');
          }
          return fileType && fileLimit
      },
	//	上传之前的校验另一种方法
	//   beforUpload(){
			//var FileExt = file.name.replace(/.+\./, "");       
		    //  if (['jpg','png','pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){            
		      //  this.$message({ 
		        //    type: 'warning', 
		         //   message: '请上传后缀名为jpg、png、doc、docx、xlsx、zip或rar的附件！' 
		       //  });                
		        //return false;       
		     // }  
		//},
      
      handleSuccess(){
        this.$message.success('文件上传成功');
      },
      handl
      eError(){
        this.$message.error('文件上传失败');
      },
      
      uploadHttpRequest(param) {
          const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
          formData.append('filepath', param.file) //添加文件对象
          formData.append('tableid', this.tableid)
          formData.append('isAutoDocNumber', this.uploadType);
          this.$api.post('/api/filemake/Excelread',formData)
          .then(res=>{
            let code = res.code;
            if(code == 0){
              param.onSuccess();
            }else{
              this.failTit(res.errormsg || "条目导入失败")
            }
          })
          .catch(err=>{
            param.onError() 
          })
          .finally(()=>{
              this.$emit('ok')
          })
      }, 
          
      // 文件发生改变
      fileChange(file, fileList) {
          if (fileList.length > 0) {
              this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件
          }
      },
      // 移除选择的文件
      fileRemove(file, fileList) {
          if(fileList.length < 1) {
              this.uploadDisabled = true //未选择文件则禁用上传按钮
          }else{
              this.uploadDisabled = false
          }
      },
      
      // 点击上传：手动上传到服务器，此时会触发组件的http-request
      handleSubmit() {
          this.visible = false
          this.$refs.upload.submit()
          this.$emit("upload")
      },
      
      handleCancel() {
        this.visible = false;
        this.$refs.upload.clearFiles() //清除上传文件对象
        this.fileList = [] //清空选择的文件列表
      },
      
      onUploadChange( e ){
        console.log('radio checked', e.target.value);
      }
  },
};

4、a-upload头像自动上传

<a-upload
   	name="file"
    accept="image/*"
    :showUploadList="false"
    :multiple="false"
    :customRequest="__upload_folder_request" 
>
    <div class="avatar mx-5">
        <img class="rounded-full w-20 h-20" :src="avatar" alt="">
        <img class="photo" :src="require('@/assets/profile/camera-green.png')" alt=""> 
    </div>
</a-upload>

//实现方法
    /**
    * @description: 
     * 上传头像
     * @param {*}
     * @return {*}
     */
    __upload_folder_request(data){
        const formData = new FormData()  
        formData.append('avatar', data.file) 
        this.$api.post(`/userinfo/user/updateAvatar`, formData )
        .then( res=>{
            let code = res.code;
            if( code == 0 ){
                let avatar = res.data;
                this.$store.dispatch("user/setUserAvatar", avatar)
                this.avatar = avatar;
            }
        })
    },