重构上传下载

src/views/system/modelModify.vue

@@ -157,31 +157,66 @@ export default {
     },
     methods: {
         getFileName() {
+            console.log(this.filePath);
+            console.log(this.filePath.split('/').pop());
             return this.filePath.split('/').pop();
         },
-        downloadFile() {
+        downloadFile(){
             const filename = this.filePath.split('/').pop(); // 要下载的文件名
-            request.get(`/othermodel/download/${filename}`).then(res => {
-                console.log("success");
-                const base64Data = res.data.file;
-                const byteCharacters = atob(base64Data); // 使用atob解码Base64字符串
-                const byteNumbers = new Array(byteCharacters.length);
-                for (let i = 0; i < byteCharacters.length; i++) {
-                    byteNumbers[i] = byteCharacters.charCodeAt(i);
-                }
-                const byteArray = new Uint8Array(byteNumbers)
-                const blob = new Blob([byteArray], {type: 'application/octet-stream'});
-                const downloadUrl = URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = downloadUrl;
-                link.download = filename; // 替换为你的文件名及扩展名
-                link.click();
+            request({
+                url: `/othermodel/download/${filename}`,
+                responseType: 'blob', // 表明返回服务器返回的数据类型
+                method: 'get'
+            }).then(result => {
+                console.log(result);
+                //创建一个Blob对象接收后端传来的文件流
+                const blob = new Blob([result.data], {
+                    type: 'application/octet-stream'
+                })
+                const downloadElement = document.createElement('a')
+                // 创建下载的链接
+                const href = window.URL.createObjectURL(blob)
+                downloadElement.href = href
+                // 下载后文件名
+                const contentDis =result.headers['content-disposition'];
+                const filename = decodeURI(contentDis.split('=')[1]);
+                downloadElement.download = filename
+                document.body.appendChild(downloadElement)
+                // 点击下载
+                downloadElement.click()
+                // 下载完成移除元素
+                document.body.removeChild(downloadElement)
+                // 释放掉blob对象
+                window.URL.revokeObjectURL(href)
+            }).catch(err => {
+                console.log("出错误啦"+err.code)
+                this.$message.error(err.message)
             })
-                .catch(error => {
-                    console.error('Error downloading file:', error);
-                });
 
         },
+        // downloadFile() {
+        //     const filename = this.filePath.split('/').pop(); // 要下载的文件名
+        //     request.get(`/othermodel/download/${filename}`).then(res => {
+        //         console.log("success");
+        //         const base64Data = res.data.file;
+        //         const byteCharacters = atob(base64Data); // 使用atob解码Base64字符串
+        //         const byteNumbers = new Array(byteCharacters.length);
+        //         for (let i = 0; i < byteCharacters.length; i++) {
+        //             byteNumbers[i] = byteCharacters.charCodeAt(i);
+        //         }
+        //         const byteArray = new Uint8Array(byteNumbers)
+        //         const blob = new Blob([byteArray], {type: 'application/octet-stream'});
+        //         const downloadUrl = URL.createObjectURL(blob);
+        //         const link = document.createElement('a');
+        //         link.href = downloadUrl;
+        //         link.download = filename; // 替换为你的文件名及扩展名
+        //         link.click();
+        //     })
+        //         .catch(error => {
+        //             console.error('Error downloading file:', error);
+        //         });
+        //
+        // },
         confirmModel() {
             const isModifyName = this.inputValue !== '' && this.inputValue !== this.$route.query.modelName;
             if (isModifyName) {