element-ui?el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能
在后臺管理系統(tǒng)中總是會用到上傳文件的功能，
想實現(xiàn)的樣式如下：（實現(xiàn)上傳文件后，在input輸入框顯示文件名 ）
結構代碼如下：
<el-form-item label="使用說明" class="uploadMain" prop="instruction">
<el-input
class="uploadInput"
v-model="productVO.instruction"
style="width: 75%"
placeholder="請上傳pdf格式的使用說明文件"
:disabled="true"
>
<el-upload
slot="append"
class="uploadbox"
ref="upload"
name="file"
accept=".pdf" //接受上傳文件的格式，此處會默認打開上傳時篩選.pdf格式
:show-file-list="false"
:multiple="false" //如果想要一次選擇多個文件 mulitiple為true
action="upload"
:on-change="onChange"
:auto-upload="false" //自動上傳，如果此處為true 選擇完文件就直接上傳了
>
<!-- class="uploadbtn" -->
<el-button class="uploadbtn"></el-button>
</el-upload>
</el-input>
</el-form-item>由于上述結構代碼打開上傳文件時會自動篩選accept的文件格式，但是在用戶選擇時仍可以自己選擇全部文件，所以需要前端對上傳文件進行初步的格式檢驗
前端部分上傳文件初步檢驗js代碼如下：
onChange(file) {
// 校驗格式
if (['application/pdf'].indexOf(file.raw.type) == -1) {
this.$message.error('請上傳正確的pdf格式');
return false;
}
this.productVO.instruction = file.name;
this.productVO.instructionFile = file.raw; //上傳文件時需要用到二進制，所以這里文件取值為file.raw
},上傳至接口時js代碼如下：
submit(){
const formData = new FormData();
formData.append('instruction', this.productVO.instruction);
formData.append('instructionFile',this.productVO.instructionFile);
//調(diào)用接口
this.$post('/product/create',formData,{
baseURL:'/',
header:{isloading: true,'Content-Type': 'multipart/form-data'}).then()
}".doc" | "application/msword" | ".xls" | "application/vnd.ms-excel" |
".docx" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | ".xlsx" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" |
".jpeg" | "image/jpeg" | ".mp3" | "audio/x-mpeg" |
".jpg" | "image/jpeg" | ".mp4" | "video/mp4" |
".png" | "image/png" | ".pdf" | "application/pdf" |
".ppt" | "application/vnd.ms-powerpoint" | ".txt" | "text/plain" |
".tar" | "application/x-tar" | ".wps" | "application/vnd.ms-works" |
".zip" | "application/x-zip-compressed" | ".xml" | "text/plain" |
附加：當上傳文件為多個時，具體代碼如下：
<el-form-item label="數(shù)據(jù)" class="uploadMain" prop="entity">
<el-input
class="uploadInput"
v-model="productVO.entity"
style="width: 75%"
placeholder="請上傳完整的tif/tiff/shp格式的數(shù)據(jù)文件"
:disabled="true"
>
<el-upload
slot="append"
class="uploadbox"
ref="upload"
name="file"
accept=".tif,.tiff,.shp,.dbf,.prj,.sbn,.sbx,.shx"
:show-file-list="false"
multiple
:file-list="this.productVO.fileList"
action="upload"
:on-change="onChange"
:auto-upload="false"
>
<!-- class="uploadbtn" -->
<el-button class="uploadbtn"></el-button>
</el-upload>
</el-input>
<div style="color: #ffc230">此處是文本說明</div>
</el-form-item>js代碼如下：
onChange(file,fileList) {
// 校驗格式
if (['image/tiff', ''].indexOf(file4.raw.type) == -1) {
this.$message.error('請上傳正確的tif/tiff/shp格式');
return false;
}else{
this.productVO.fileList=fileList
console.log(this.productVO.fileList)
var listName=[]
this.productVO.fileList.forEach(function(e){listName.push(e.name)})
var listFileRaw=[]
this.productVO.fileList.forEach(function(e){listFileRaw.push(e.raw)})
this.productVO.entity = listName; //文本框顯示所有的文件名
this.productVO.entityFile = listFileRaw;
}
},接口上傳文件時formData傳參改動如下：
this.productVO.entityFile.forEach(element => {
formData.append('entityFile', element)
})總結
到此這篇關于element-ui el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能的文章就介紹到這了,更多相關element-ui el-upload上傳文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue路由篇之router-view內(nèi)容無法渲染出來問題
這篇文章主要介紹了vue路由篇之router-view內(nèi)容無法渲染出來問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題
這篇文章主要介紹了vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過示例代碼介紹了vue時間戳和時間的相互轉換方式,通過場景分析介紹了vue3使用組合式api將時間戳格式轉換成時間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧2023-12-12
vue el-form一行里面放置多個el-form-item的實現(xiàn)
本文主要介紹了vue el-form一行里面放置多個el-form-item的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue使用動態(tài)添加路由(router.addRoutes)加載權限側邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權限側邊欄的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
基于el-table封裝的可拖拽行列、選擇列組件的實現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue項目打包步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue中聲明式導航與編程式導航，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-11-11
elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
Babel自動生成Attribute文檔實現(xiàn)詳解
這篇文章主要為大家介紹了Babel自動生成Attribute文檔實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11