<!--文件上传组件--> <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=''; }