快捷導(dǎo)航

vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能示例詳解

更新時(shí)間：2025年03月05日 09:24:45 作者：最初@

文章介紹了如何使用Vue和Element UI實(shí)現(xiàn)上傳文件和導(dǎo)入文件的功能,主要內(nèi)容包括：上傳組件的使用、data中的數(shù)據(jù)存儲(chǔ)、methods中的方法（選擇文件、點(diǎn)擊確定上傳文件、刪除文件）,文章還提供了相關(guān)鏈接供進(jìn)一步學(xué)習(xí),感興趣的朋友一起看看吧

vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能

1. 上傳組件

<el-form-item label="上傳文件：">
  <el-upload
    action=""
    :file-list="fileList"
    :show-file-list="false"
    :http-request="handUpLoad"
    drag
    :limit="1"
    :accept="'.xls, .xlsx'"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
  </el-upload>
  <ul class="downloadFile">
    <li v-for="(val, index) in fileList" :key="index">
    <a class="el-upload-list__item-name" href="javascript:;" rel="external nofollow" ><i class="el-icon-document" />{{ val.fileName }}</a>
    <i class="el-icon-close" @click="handleFileRemove(val)" />
    </li>
    <li v-show="fileLoading"><i class="loading el-icon-loading" /> </li>
  </ul>
</el-form-item>

2. data中的數(shù)據(jù)

data() {
  return {
    fileList: [],
    fileLoading: false,
    fileobj: ''
  }
}

3. methods中的方法

① 選擇文件

handUpLoad(fileobj) {
  this.fileobj = fileobj
  this.fileList = [{
    fileName: fileobj.file.name,
    fileSize: fileobj.file.size
  }]
}

② 點(diǎn)擊確定，調(diào)用接口上傳文件

submit() {
  if (this.fileList.length === 0) {
    this.$message({
      message: '請(qǐng)先上傳文件',
      type: 'warning'
    })
    return
  }
  const param = new FormData()
  param.append('file', this.fileobj.file)
  // 調(diào)用上傳文件的方法--fileImport
  fileImport(param).then(res => {
    this.$message({
      type: 'success',
      message: '上傳成功'
    })
  }).catch(err => {
    this.$message.error(err)
  }).finally(() => {
    this.$emit('refresh')
  })
 }

③ 刪除文件

handleFileRemove() {
  this.fileList = []
}

到此這篇關(guān)于vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能的文章就介紹到這了,更多相關(guān)vue elementui 上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2 設(shè)置router-view默認(rèn)路徑的實(shí)例
今天小編就為大家分享一篇vue2 設(shè)置router-view默認(rèn)路徑的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))
這篇文章主要介紹了element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vue路由傳參的三種方式實(shí)例詳解
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
Vue3訪問(wèn)頁(yè)面時(shí)自動(dòng)獲取數(shù)據(jù)的方法實(shí)現(xiàn)
本文介紹了在Vue3中如何利用生命周期鉤子函數(shù)和定時(shí)器實(shí)現(xiàn)訪問(wèn)頁(yè)面時(shí)自動(dòng)獲取數(shù)據(jù)的方法,這種方法適用于需要在頁(yè)面加載時(shí)即時(shí)更新數(shù)據(jù)顯示的場(chǎng)景,感興趣的可以了解一下
2024-11-11
vue 自定義組件 v-model雙向綁定、父子組件同步通信的多種寫(xiě)法
父子組件通信，都是單項(xiàng)的，很多時(shí)候需要雙向通信。這篇文章主要介紹了vue 自定義組件 v-model雙向綁定、父子組件同步通信,需要的朋友可以參考下
2017-11-11
解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題
這篇文章主要介紹了解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐
本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見(jiàn)文件類(lèi)型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-01-01
淺談Vue的加載順序探討
本篇文章主要介紹了Vue的加載順序探討，詳細(xì)的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
npm如何更新VUE package.json文件中依賴(lài)的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴(lài)的包版本問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Uniapp中WebView的使用與后退鍵處理教程
在Uniapp中使用web-view組件來(lái)加載H5頁(yè)面時(shí),對(duì)于后退鍵的處理是一個(gè)常見(jiàn)需求,下面這篇文章主要給大家介紹了關(guān)于Uniapp中WebView的使用與后退鍵處理的相關(guān)資料,需要的朋友可以參考下
2024-07-07