TML DOM INPUT FILE 大文件上傳源代碼，B/S大附件上傳，支持?jǐn)帱c(diǎn)續(xù)傳，VUE處理文件流實(shí)現(xiàn)上傳下載，VUE 上傳大型文件插件(VUE上傳視頻插件)

之前在網(wǎng)上也搜索過相關(guān)的資料，在論壇里面也與網(wǎng)絡(luò)交流過，但是給出的方案都不太令人滿意。一方面論壇里面的網(wǎng)頁都沒有真實(shí)的項(xiàng)目經(jīng)驗(yàn)。幾乎大部分的網(wǎng)頁都是在紙上談兵，很多問題完全是憑想象在回答。

后端PHP5,PHP6,PHP7,PHP8，ThinkPHP，

服務(wù)器支持Linux，Windows,macOS,CentOS,中標(biāo)麒麟，銀河麒麟，統(tǒng)信，龍芯，華為鯤鵬，

數(shù)據(jù)庫支持MySQL，達(dá)夢數(shù)據(jù)庫，人大金倉

需要提供前端源碼，后端源碼，控件源碼

需要提供7*24小時(shí)技術(shù)支持，長期技術(shù)支持，長期維護(hù)服務(wù)

需要提供手機(jī)，QQ，微信，企業(yè)微信，電子郵箱等聯(lián)系方式

需要支持包含IE在內(nèi)的全部瀏覽器

終端需要支持Windows,macOS,Linux,信創(chuàng)國產(chǎn)化環(huán)境，中標(biāo)麒麟，銀河麒麟，統(tǒng)信UOS，龍芯，華為

功能需要支持10G，50G,100G大文件上傳和斷點(diǎn)續(xù)傳，刷新續(xù)傳，重啟續(xù)傳

文件夾包含1W，10W，100W個(gè)文件和層級結(jié)構(gòu)

支持超大文件分片，分段，分塊，分割上傳下載，斷點(diǎn)續(xù)傳

支持文件夾上傳，下載斷點(diǎn)續(xù)傳，支持文件夾層級結(jié)構(gòu)，層級結(jié)構(gòu)信息保存到數(shù)據(jù)庫，下載的時(shí)候同樣保留層級結(jié)構(gòu)

支持加密上傳，下載加密，端到端加密，國密SM4加密算法，數(shù)據(jù)加密傳輸，傳輸過程中要保證數(shù)據(jù)是加密的。1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復(fù)制到項(xiàng)目中

示例中已經(jīng)包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動(dòng)測試

啟動(dòng)成功

效果

數(shù)據(jù)庫

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

生命是什么呢，

生命是時(shí)時(shí)刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的開發(fā)工具可以讓我們事半功倍。前面我們對HTML的相關(guān)概念和基本結(jié)構(gòu)已經(jīng)有了基本的了解，下面我們就來安裝在前端開發(fā)中的需要使用的開發(fā)工具及環(huán)境。

在眾多HTML編輯器中，選擇一個(gè)適合自己的工具至關(guān)重要。今天我們就來認(rèn)識一下前端開發(fā)工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發(fā)環(huán)境。

一、前端開發(fā)工具簡介

在介紹 “VS Code” 之前，我們先來了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成開發(fā)環(huán)境的英文縮寫 （Integrated Development Environment)，集成開發(fā)環(huán)境就是將在開發(fā)過程中所需要的工具或功能集成到了一起，比如：代碼編寫、分析、編譯、調(diào)試等功能，從而最大化地提高開發(fā)者的工作效率。

IDE 通用特點(diǎn)：

• 提供圖形用戶界面，在 IDE 中可以完成開發(fā)過程中所有工作；
• 支持代碼補(bǔ)全與檢查，并提供快速修復(fù)選項(xiàng)；
• 內(nèi)置解釋器與編譯器；
• 功能強(qiáng)大的調(diào)試器，支持設(shè)置斷點(diǎn)與單步執(zhí)行等功能。

前端開發(fā)IDE

而在前端開發(fā)中我們需要安裝一個(gè)“趁手”的IDE，幫助我們更快更高效的開發(fā)，一個(gè)好的IDE是每個(gè)程序員的必備武器。前端開發(fā)IDE有很多種，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我們可以任選一種使用。這幾種IDE的對比如下：

這么多IDE該怎么選呢？對于我們初學(xué)者來說，選擇Visual Studio Code，（簡稱VS Code）就可以了。VS code具備內(nèi)置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高，且有MAC版本，應(yīng)用廣泛等優(yōu)點(diǎn)，很適合新手。

下面就和我一起下載并安裝VS code吧！

二、VS Code下載與安裝

1、進(jìn)入VScode官網(wǎng)

官網(wǎng)地址：https://code.visualstudio.com/

點(diǎn)擊【Download】進(jìn)入下載，不要點(diǎn)擊【Download for Windows Stable Build】，否則它會自動(dòng)幫你下載User Installer用戶版本。

• 【Stable】：穩(wěn)定版本，比較穩(wěn)定。
• 【Insiders】：測試版本，添加了一些新東西，還在測試中，可能會存在一些Bug，不怎么穩(wěn)定。

2、然后你會看見Windows，Linux，蘋果三個(gè)版本，我們選擇Windows版本，選擇System Installer 點(diǎn)擊【x64】進(jìn)行下載，不要點(diǎn)擊【↓ Windows windows8,10,11】，否則它也會自動(dòng)默認(rèn)下載User Installer用戶版本。

• 【User Installer】：用戶安裝程序，VScode安裝在你電腦當(dāng)前賬戶的目錄上，如果你換了一個(gè)其他賬戶登錄你的電腦，那么你就用不了之前那個(gè)賬戶下載的VScode了。
• 
  

• 【System Installer】：系統(tǒng)安裝程序，VScode不會安裝在你電腦的當(dāng)前賬戶上，而是直接安裝在系統(tǒng)上，所有賬戶都可以使用。

其實(shí)選哪個(gè)版本都無傷大雅，就算你下載了【User Installer】版本也沒事，因?yàn)闆]人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來，只是有時(shí)候特殊情況換了個(gè)賬戶登錄不能使用就有一點(diǎn)麻煩，所以還是推薦盡量下載【System Installer】版本。

【x86】：32位操作系統(tǒng)。【x64】:64位操作系統(tǒng)，如果想知道自己是什么系統(tǒng)，可以敲擊Win鍵找到“設(shè)置”→“系統(tǒng)”→“關(guān)于”→“系統(tǒng)類型”。

3、正在下載

這個(gè)下載會比較慢，如果不想等可直接去找個(gè)別人下好的安裝包哦！也可找小編領(lǐng)取。

4、下載完后打開文件，會彈出許可協(xié)議彈窗，勾選我同意此協(xié)議，單擊【下一步】。

5、先去D盤里創(chuàng)建一個(gè)新文件夾取名叫“VScode”，點(diǎn)擊【瀏覽】按鈕修改安裝路徑，把路徑改到剛剛在D盤里創(chuàng)建的VScode文件夾里。如果覺得麻煩也可以直接默認(rèn)安裝在C盤，然后單擊【下一步】，但還是建議安裝在D盤里。

6、修改完路徑后，單擊【下一步】。（安裝路徑是這個(gè)樣子D:\VScode\Microsoft VS Code）

7、選擇開始菜單文件夾，默認(rèn)"Visual Studio Code",單擊【下一步】。

8、根據(jù)自己的需求進(jìn)行勾選，勾選完單擊【下一步】。

【創(chuàng)建桌面快捷方式】：在桌面創(chuàng)建VScode快捷方式。

【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】：選中一個(gè)文件鼠標(biāo)右鍵可以通過VScode打開文件。

【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】：選中一個(gè)文件夾鼠標(biāo)右鍵可以通過VScode打開文件夾。

【將Code注冊為受支持的文件類型的編輯器】：對于受支持的文件類型的文件，鼠標(biāo)右鍵選擇“打開方式”，可以通過“Vscode”打開。

【添加到PATH】：添加VScode文件夾里的bin目錄到PATH環(huán)境變量里，添加完以后可通過系統(tǒng)命令輸入code直接啟動(dòng)VScode。

9、單擊【安裝】進(jìn)行安裝。

10、安裝完成后單擊【完成】啟動(dòng)。

三、VS code配置插件

下載完之后，大家可以根據(jù)自己的需求下載插件，這里推薦我用的比較順手的幾個(gè)。

1、下載漢化包

點(diǎn)擊擴(kuò)展，在搜索欄搜索Chinese，選擇Chinese中文簡體點(diǎn)擊【Install】進(jìn)行安裝。（建議少用，多看英文，這是一位優(yōu)秀的程序員走向成功的標(biāo)志性成長。）

安裝完后單擊【Change Language and Restart】重啟VScode軟件，刷新一下就變成中文簡體了。

2、下載【會了吧】插件

在搜索欄里搜索【會了吧】，這個(gè)是在你敲代碼時(shí)會自動(dòng)識別你敲的單詞進(jìn)行翻譯，如果你有一個(gè)單詞不認(rèn)識，可以點(diǎn)進(jìn)“會了吧”看看翻譯，對英語基礎(chǔ)差的人很友好。

3、下載【Open in browser】插件

這個(gè)是用來運(yùn)行代碼，并且在瀏覽器打開，查看運(yùn)行效果的，這個(gè)插件必須下，否則當(dāng)你寫完HTML網(wǎng)頁時(shí)你無法運(yùn)行，無法預(yù)覽頁面，不信你可以先試試能不能運(yùn)行再回來下載。

4、下載【Live Server】插件

這個(gè)是用于實(shí)時(shí)預(yù)覽運(yùn)行效果，當(dāng)你使用open in browser運(yùn)行代碼時(shí)，只要你的代碼有改變，你就需要手動(dòng)刷新重新預(yù)覽頁面運(yùn)行結(jié)果，而Live Server是自動(dòng)刷新運(yùn)行結(jié)果，非常方便，非常滴銀性！

四、用VScode編寫HTML代碼

1、先去D盤里創(chuàng)建一個(gè)新文件夾取名叫“Workspace”（名字隨便取名）。

2、進(jìn)入VScode找到左上角的文件選擇點(diǎn)擊打開文件夾。

3、找到剛剛創(chuàng)建的“workspace”文件夾，單擊【選擇文件夾】。

4、找到WORKSPACRE，點(diǎn)擊新建文件，名字輸入“01.html”,然后點(diǎn)擊回車鍵創(chuàng)建。

5、在剛剛創(chuàng)建的01.html文件下輸入以下代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>這是我的第一個(gè)網(wǎng)頁</h1>
    </body></html>

6、鼠標(biāo)右擊空白處單擊【Open In Default Browser】查看運(yùn)行結(jié)果。

7、運(yùn)行結(jié)果如下 。

以上就是常用的前端開發(fā)工具VS Code的下載和安裝教程了，你的第一個(gè)HTML網(wǎng)頁運(yùn)行成功了嗎？

一個(gè)高效的HTML開發(fā)工具和環(huán)境是每個(gè)前端開發(fā)者的得力助手。通過合理選擇工具、配置環(huán)境、使用框架和庫、以及不斷的調(diào)試和測試，你可以將創(chuàng)意轉(zhuǎn)化為現(xiàn)實(shí)，構(gòu)建出令人驚嘆的網(wǎng)頁。記住，技術(shù)永遠(yuǎn)在變，唯有不斷學(xué)習(xí)和實(shí)踐，才能讓你在這個(gè)數(shù)字世界中游刃有余。

今天就先講到這里了，

更多前端開發(fā)基礎(chǔ)知識點(diǎn)擊文末閱讀原文查看哦！

記得關(guān)注【云端源想IT】一起學(xué)編程！

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享