element upload文件自定义上传

<!--文件上传组件-->
<el-dialog title="上传" :visible.sync="dialogFormVisible2" :before-close="closeFileUploadDialog">
      <el-form :model="uploadForm">
        <el-form-item label="">
          <el-upload  ref="uploadForm" action=""  :multiple="false" :file-list="fileList" :before-upload="beforeUpload"
           	:on-change="handleFileChange" :on-remove="handleRemove"
           	:http-request="uploadFile" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFileUploadDialog">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
</el-dialog>
   //上传文件,获取文件流
      handleFileChange(file) {
        console.log(file);
     		this.file = file.raw
     	},
      handleRemove(file, fileList){
         this.file='';
      },
      beforeUpload(file){

      },
      submitUpload() {
        if(this.file!=''){
          this.$refs.uploadForm.submit();
        }else{
           this.$message({
             message: '请先选择文件!',
             type: 'warning',
             duration:'2000'
           });
        }
      },
      deleteFile(savedPath){
        this.$axios({
          url: "/api/test/ttAirBronzeMedal/deleteFile",
          method: "post",
          data:{
            "savedPath":savedPath
          }
        }).then((response) => {
           console.log('res delete=>',response);
           this.editForm.qualificationScan='';
           this.styleObj1={display:'none'};
           this.styleObj2={display:'inline'};
           this.file='';
           this.fileList=[];
        }).catch(response => {
          console.log(response)
        });
      },
      downloadFile(savedPath){
         alert(savedPath);
         this.$axios({
     	   url: "/api/test/ttAirBronzeMedal/downloadFile",
           method: "get",
           params:{
            "savedPath":savedPath
          },
          //responseType: 'blob'
          responseType:"arraybuffer"
     		}).then((response) => {
            console.log('res download=>',response);
            const _res = response.data;
            console.log('res download=>',_res);
            let blob = new Blob([_res],{type:"application/x-png;charset=UTF-8"});
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "test.png"; //下载后文件名A
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href);//释放掉blob对象*/
            /*var src='data:image/jpg;base64,'+ btoa(new Uint8Array(_res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
            this.srcImg = src; //图片回显
            var link = document.createElement('a');
            link.href = src;
            link.download = "qrCode.png";
            link.click();
            //document.body.removeChild(link); //下载完成移除元素
           // window.URL.revokeObjectURL(link);//释放掉blob对象*/
        }).catch(response => {
          console.log(response)
        })
      },
     	// 自定义上传
     	uploadFile() {
        let index = this.file.name.lastIndexOf(".");
        let suffix = this.file.name.substr(index+1);
     		// 创建表单对象
     		let formData = new FormData();
     		// 后端接受参数 ,可以接受多个参数
     		formData.append("file",this.file)
                formData.append("uploadFileName","git")
     		formData.append("uploadFileContentType",suffix)
     		this.$axios({
     			url: "/api/test/ttAirBronzeMedal/uploadFile",
                        method: "post",
                        data:formData,
     		}).then((response) => {
            console.log('res=>',response);
            var res=response.data;
            if(res.succ=="ok"){
                this.editForm.qualificationScan=res.msg;
                this.dialogFormVisible2=false;
                this.styleObj1={display:'inline'};
                this.styleObj2={display:'none'};
                this.$message({
                  message: this.$t('common.uploadSucess'),
                  type: 'success',
                  duration:'2000'
                });
            }else{
               this.$message({
                 message: this.$t('common.uploadFail'),
                 type: 'error',
                 duration:'2000'
               });
            }
        })
  },
closeFileUploadDialog(){
          this.dialogFormVisible2=false;
          this.file='';
          this.fileList=[];
 },
 showFileUpload(type){
          this.dialogFormVisible2=true;
          this.file='';
 }

  

猜你喜欢

转载自www.cnblogs.com/xmyfsj/p/12176904.html
今日推荐