資訊專欄INFORMATION COLUMN
由于瀏覽器的安全限制，通過js的onchange事件獲取上傳文件的路徑時(shí)，返回的是C:fakepath文件名，隱藏了真實(shí)的物理路徑，可以使用window.URL.createObjectURL()返回一個(gè)Blob對(duì)象，Blob對(duì)象就是二進(jìn)制數(shù)據(jù)，它是一個(gè)包含有只讀原始數(shù)據(jù)的類文件對(duì)象
組件upload：
當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)SendDocument方法
this.$refs.upload.submit();會(huì)觸發(fā)beforeUpload方法
打印結(jié)果如下：
就可以把blob對(duì)象傳給extrinsicFileName（表單里的一個(gè)字段）
這樣可以把表單的數(shù)據(jù)提交給后臺(tái)了
那么重點(diǎn)是，你為什么要獲取上傳文件的路徑？
我是一個(gè)初學(xué)者，剛剛開始學(xué)習(xí)做上傳文件這個(gè)功能，簡單以為要把文件路徑返回給后臺(tái)，通過他們?nèi)カ@取上傳文件的數(shù)據(jù)。
那么上傳文件功能實(shí)際上是不需要獲取文件路徑的，而是通過二進(jìn)制流傳過去的，上面的blob對(duì)象其實(shí)就是表示文件的二進(jìn)制數(shù)據(jù)，通過文件流的方式傳輸，在計(jì)算機(jī)里所有的對(duì)象都是通過二進(jìn)制流傳輸?shù)摹lob對(duì)象是File類型的父類型，就是Flie對(duì)象通過slice（）讀取整個(gè)文件的部分?jǐn)?shù)據(jù)。File包含name、size、type等屬性，Blob有size、type屬性。所以上傳文件是直接把客戶端的文件數(shù)據(jù)發(fā)送到服務(wù)端，不是文件路徑，而是整個(gè)文件的數(shù)據(jù)，客戶端下載服務(wù)端的就可以通過服務(wù)端的路徑找到服務(wù)端的文件，服務(wù)端是沒有辦法通過路徑訪問客戶端文件的。
除非是，服務(wù)端返回一個(gè)路徑，比如“c:/aa.txt”，然后客戶端收到這個(gè)路徑，通過代碼找到這個(gè)文件，之后再把這個(gè)aa.txt整個(gè)文件數(shù)據(jù)發(fā)送給服務(wù)端，其實(shí)說到底還是客戶端把整個(gè)文件數(shù)據(jù)發(fā)送給服務(wù)端。
基礎(chǔ)沒打牢就開始學(xué)習(xí)框架，我開始懷疑自己是不是走錯(cuò)路線了，不過學(xué)習(xí)總是一個(gè)循序漸進(jìn)的過程，不可能是直線式的，想和大家多交流，所以以后還請(qǐng)大家多多指教。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107106.html
摘要：對(duì)于前端人員來說，圖片處理是一個(gè)很常見的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用接口通過方法來提交，例如方法提交，后臺(tái)處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫入標(biāo)簽，但是基于當(dāng)前的前后端分離的開發(fā)模式下，前后端代碼往往不在同 對(duì)于前端人員來說，圖片處理是一個(gè)很常見的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用ajax接口通過http方法來提交，例如post方法提交，...
摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...
摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...
摘要：后來查閱了資料后自己手動(dòng)實(shí)現(xiàn)了文件切片上傳到服務(wù)器基本需求已經(jīng)實(shí)現(xiàn)，但由于效率及穩(wěn)定性問題后來決定還是直傳文件到七牛云。總結(jié)起來七牛云上傳的套路就是后臺(tái)為你提供或者獲取的接口地址之后上傳的時(shí)候要帶上這個(gè)。 起因 最近在工作中有個(gè)上傳大文件的需求，原先咨詢過組里的大佬給我推薦了百度的webupload，但后來引入之后發(fā)現(xiàn)它是基于jquery封裝的。由于本身項(xiàng)目是基于vue開發(fā)的所以與j...
閱讀 1151·2023-04-26 03:02
閱讀 1191·2023-04-25 19:18
閱讀 2595·2021-11-23 09:51
閱讀 2577·2021-11-11 16:55
閱讀 2631·2021-10-21 09:39
閱讀 1710·2021-10-09 09:59
閱讀 2005·2021-09-26 09:55
閱讀 3532·2021-09-26 09:55
