Element-UI對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理,所以要求action為必填屬性。但是如果需要讀取本地文件并在前端直接處理,文件就沒(méi)有必要傳遞到后臺(tái),比如在本地打開(kāi)一個(gè)JSON文件,利用JSON文件在前端進(jìn)行動(dòng)態(tài)展示等等。
下面就展示一下具體做法:
首先定義一個(gè)jsonContent, 我們的目標(biāo)是將本地選取的文件轉(zhuǎn)換為JSON賦值給jsonContent
然后我們的模板文件是利用el-dialog和el-upload兩個(gè)組件組合:這里停止文件自動(dòng)上傳模式:auto-upload="false"
<el-button type="primary" @click="dialogVisible = true">Load from File</el-button> <el-dialog title="Load JSON document from file" :visible.sync="dialogVisible"> <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile"> <el-button size="small" type="primary">Select a file</el-button> <div slot="tip">upload only jpg/png files, and less than 500kb</div> </el-upload> <span slot="footer"> <el-button type="primary" @click="dialogVisible = false">cancel</el-button> <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button> </span> </el-dialog>
網(wǎng)頁(yè)名稱(chēng):詳解Element-UI中上傳的文件前端處理-創(chuàng)新互聯(lián)
鏈接地址:http://jinyejixie.com/article44/dijsee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容