Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

我測試過很多遍,想要通過a標簽的形式來直接點擊url下載文件并重命名但是都失敗了,最終只能下載卻不能重命名 所以 換了java后臺來修改名字.以下代碼

我做的網頁是點擊文件直接下載

直接下載下來了,一開始的文件名是上傳到oss時以id命名的名字,現在下載的時候想改名,遇到了問題,所以寫了這篇博客

首先是后臺代碼

/** * 附件下載 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = '/download') public void downloadFile(@RequestParam Map<String, Object> param, HttpServletResponse response) throws Exception { String url1 = param.get('url').toString(); URL url = new URL(url1); URLConnection conn = url.openConnection(); InputStream inputStream = conn.getInputStream(); response.reset(); response.setContentType(conn.getContentType()); //純下載方式 文件名應該編碼成UTF-8 response.setHeader('Content-Disposition', 'attachment; filename=' + URLEncoder.encode(param.get('name').toString(), 'UTF-8')); byte[] buffer = new byte[1024]; int len; OutputStream outputStream = response.getOutputStream(); while ((len = inputStream.read(buffer)) > 0) { outputStream.write(buffer, 0, len); } inputStream.close(); }

代碼里面的 url 需要事先 去阿里云獲取,我因為前端上傳的時候 獲取到了url就直接傳到后臺用了.

前端vue代碼

//下載和預覽 handlePreview(file) { if (file.type == ’png’ || file.type == ’jpg’) { this.imageUrl = file.url; this.imageDetail = true; } else { var form = document.createElement('form'); document.body.appendChild(form); form.method = 'post'; form.appendChild(this.generateHideElement(’url’,file.url)); form.appendChild(this.generateHideElement(’name’,file.name)); form.action = '接口地址'// 路由地址+接口地址 form.submit(); } }, generateHideElement(name, value) { var tempInput = document.createElement('input'); tempInput.type = 'hidden'; tempInput.name = name; tempInput.value = value; return tempInput; },

好了這就完了,很簡單的一段代碼, 我也是剛學vue歡迎大佬指點

到此這篇關于Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法的文章就介紹到這了,更多相關vue 阿里云oss下載文件內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！