這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)vue3.0+.net core實現(xiàn)文件上傳組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為通川企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站，通川網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

使用技術(shù)

客戶端使用vue.js 3.0，并使用vue3新增的功能:Composition API ,服務(wù)器使用asp.net core

功能點

1. 標簽美化
2. 文件預覽
3. 文件上傳
4. 服務(wù)器接收文件
    

文件選擇美化

在標準的html文件選擇標簽，是十分不美觀的。大概就是下圖的樣子

但是我們的設(shè)計師的設(shè)計圖可不是這樣的啊，所以第一步是選擇美化一下樣式。

標簽美化

找遍整個搜索引擎，美化文件選擇標簽只有兩種方法

1. 設(shè)置input標簽透明度為0，然后定位一個其他的容易修改樣式的標簽到透明度度為0的input標簽上。
2. 設(shè)置input標簽的display為none，然后使用JavaScript來觸發(fā)當前input的點擊事件。

因為筆者最近在做基于vue.js 3.0的項目，需要自己自定義很多UI組件，所以參考了layui element ，它們都是使用第二種方式來美化文件選擇標簽。

假設(shè)我們UI設(shè)計圖是上圖的樣式，如果需要美化，只需要隱藏文件選擇的Input標簽。然后放置一個按鈕，然后設(shè)置按鈕的樣式為設(shè)計圖上的樣式即可

 <div class="uploader">
  <button>選擇文件</button>
  <input type="file" placeholder="請選擇文件" />
 </div>

網(wǎng)站名稱：vue3.0+.netcore實現(xiàn)文件上傳組件-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.rwnh.cn/article4/dcoiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站策劃、微信公眾號、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)