快捷導(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)文章

使用淘寶鏡像cnpm安裝Vue.js的圖文教程
今天小編就為大家分享一篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Vue事件總線怎么用
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
vite+vue3搭建的工程熱更新失效問(wèn)題及解決
這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue 購(gòu)物車(chē)案例練習(xí)
這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車(chē)案例的小練習(xí)，文章個(gè)悲劇購(gòu)物車(chē)為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過(guò)程,需要的朋友可以參考一下文章的具體內(nèi)容
2021-10-10
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟
這篇文章主要介紹了vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
基于Vue生產(chǎn)環(huán)境部署詳解
下面小編就為大家?guī)?lái)一篇基于Vue生產(chǎn)環(huán)境部署詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
在Vue methods中調(diào)用filters里的過(guò)濾器實(shí)例
今天小編就為大家分享一篇在Vue methods中調(diào)用filters里的過(guò)濾器實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3使用vue3-print-nb main.ts報(bào)錯(cuò)聲明文件找不到的解決
在Vue3中使用vue3-print-nb時(shí),因第三方包類(lèi)型文件缺失導(dǎo)致全局引入報(bào)錯(cuò),手動(dòng)聲明可解決,打印預(yù)覽需清除標(biāo)題、地址等樣式以?xún)?yōu)化輸出,理解原理靈活應(yīng)對(duì)問(wèn)題
2025-07-07
vue+webpack 打包文件 404 頁(yè)面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁(yè)面空白的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02