国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

el-upload 只能上傳一個文件(完整適用方法),包括:新文件替換原文件方法。

這篇具有很好參考價值的文章主要介紹了el-upload 只能上傳一個文件(完整適用方法),包括:新文件替換原文件方法。。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

html:

<!-- multiple(單次多個上傳時添加) : 每次上傳多個文件時,打開 。配合 limit 屬性使用:每次可上傳文件的最大數(shù)量-->
<el-upload ref="upload" :limit="1" accept=".pdf" :headers="upload.headers" :action="upload.url +upload.id "
    :disabled="upload.isUploading" :on-change="changeUpload" :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess" :on-error='handleFileError' :auto-upload="false" drag>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div>
    <div class="el-upload__tip txt_center" slot="tip">
    <span>僅允許導(dǎo)入<b> pdf格式 </b>文件,單次只可上傳1個pdf文件</span>
    </div>
</el-upload>

js:

import { getToken } from "@/utils/auth";

data() {
    return {
    // 導(dǎo)入?yún)?shù)
    upload: {
        // 是否顯示彈出層(導(dǎo)入)
        open: false,
        // 彈出層標(biāo)題(導(dǎo)入)
        title: "",
        // 是否禁用上傳
        isUploading: false,
        // 是否更新已經(jīng)存在的用戶數(shù)據(jù)
        updateSupport: 0,
        // 設(shè)置上傳的請求頭部
        headers: {
        Authorization: "Bearer " + getToken()
        },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
    },
    }
},
methods: {
    // 只能上傳單個文件,選擇文件覆蓋原有文件
    changeUpload(file, fileList) {
    if (fileList.length > 1 && file.status !== "fail") {
        fileList.splice(0, 1);
    // 多選并上傳多個文件:
    // 方法一:fileList.splice(0, n)。n:多選文件的數(shù)量。--數(shù)組從前往后順序截取。
    // 方法二:fileList.splice(0, -n)。n:多選文件的數(shù)量。--數(shù)組從后往前順序截?。ūA糇钚律蟼鞯?,截去之前上傳的。--方法一反之)
    } else if (file.status === "fail") {
        this._err("上傳失敗,請重新上傳!");
        fileList.splice(0, 1);
    }
    },
    // 上傳文件 - 文件上傳中處理
    handleFileUploadProgress(event, file, fileList) {
    // multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
    // if (file == fileList[0]) {
    this.upload.isUploading = true;
    // }
    },
    // 上傳文件 - 文件失敗處理
    handleFileError(event, file, fileList) {
    // multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
    // if (file == fileList[0]) {
    // this.upload.isUploading = false;
    // }
    },
    // 上傳文件 -  文件上傳成功處理
    handleFileSuccess(res, file, fileList) {
    console.log(34, file, fileList)
    if (res.code == 200) {
        //  multiple屬性(單次可上傳多個文件),可打開注釋部分,功能為:最后一個文件上傳完成后,清空列表。
        //   if (file == fileList[fileList.length - 1]) {
        // 清空上傳文件列表,否則影響上傳文件數(shù)限制判斷
        this.$refs.upload.clearFiles();
        //   }
        //   this._success('上傳成功')//提示語:上傳成功。根據(jù)實際情況來
        this.getList() //刷新列表。根據(jù)實際情況來
    } else {
        // 同上
        //   if (file == fileList[fileList.length - 1]) {
        // 清空上傳文件列表,否則影響上傳文件數(shù)限制判斷
        this.$refs.upload.clearFiles();
        //   }
        this._err(res.msg)
    }
    this.upload.open = false;
    // 不在上面 if else 中控制,也可以放在這里。功能同上。
    // if (file == fileList[fileList.length - 1]) {
    //   // 上傳第一個文件開始,isUploading 置為 true,到最后一個文件上傳完成,isUploading 變?yōu)?fasle。否則控制臺會報 "status" 的錯
    this.upload.isUploading = false;
    // }
    },
    // 上傳文件 - 提交上傳文件
    submitFileForm() {
    this.$refs.upload.submit();
    },
}

auth文件:文章來源地址http://www.zghlxwxcb.cn/news/detail-536556.html

import Cookies from 'js-cookie'//需先npm install js-cookie 安裝,安裝后package.json文件中會有"js-cookie": "3.0.1"安裝版本的顯示。

const TokenKey = 'Admin-Token'

const ExpiresInKey = 'Admin-Expires-In'

// 此方法為vue文件中引入的 getToken() 方法
export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getExpiresIn() {
  return Cookies.get(ExpiresInKey) || -1
}

export function setExpiresIn(time) {
  return Cookies.set(ExpiresInKey, time)
}

export function removeExpiresIn() {
  return Cookies.remove(ExpiresInKey)
}

到了這里,關(guān)于el-upload 只能上傳一個文件(完整適用方法),包括:新文件替換原文件方法。的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點(diǎn)擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • el-upload實現(xiàn)上傳文件夾

    el-upload實現(xiàn)上傳文件夾

    背景:如圖一所示,最下面有一個黃色上傳文件按鈕,為手動上傳而且上傳區(qū)域有上傳文件和上傳文件夾的區(qū)分 所以需要在點(diǎn)擊了上傳文件夾做特殊處理使得el-upload可以上傳文件夾 01.在拖拽上傳的區(qū)域綁定一個點(diǎn)擊事件 handlePreview ,(注意不要直接綁定在el-upload區(qū)域,會被觸

    2024年02月07日
    瀏覽(25)
  • vue 使用 el-upload 上傳文件(自動上傳/手動上傳)

    vue 使用 el-upload 上傳文件(自動上傳/手動上傳) 上傳 上傳

    2024年02月13日
    瀏覽(114)
  • el-upload自定義上傳文件顯示進(jìn)度條

    el-upload自定義上傳文件顯示進(jìn)度條

    el-upload自定義上傳文件時需要顯示進(jìn)度條,但使用 http-request 會覆蓋默認(rèn)的上傳行為, on-progress 也就不生效了,所以可以 自定義上傳的實現(xiàn) 。 按鈕 數(shù)據(jù) 事件 導(dǎo)入接口 接口方法 uploadEvent ——在封裝的axios請求方法的headers里面加入即可(關(guān)鍵)

    2024年02月15日
    瀏覽(30)
  • 使用el-upload組件實現(xiàn)遞歸多文件上傳

    使用el-upload組件實現(xiàn)遞歸多文件上傳

    一、需求描述:在頁面上點(diǎn)擊按鈕彈出選擇電腦文件的界面,可以一次性選擇多個文件一起上傳到服務(wù)器上,并把上傳成功的文件展示在頁面上。 · 二、 問題闡述:el-upload是支持多文件上傳的,但是是同步進(jìn)行的,你點(diǎn)擊上傳按鈕,選擇了多個文件后點(diǎn)擊確定,會同時調(diào)用

    2023年04月08日
    瀏覽(38)
  • el-upload實現(xiàn)上傳文件并展示進(jìn)度條

    el-upload在實現(xiàn)文件上傳時無法觸發(fā)on-progress鉤子,即使調(diào)用后端接口并成功的情況下都無法觸發(fā),可以通過如下配置來解決: 隨后將config添加至調(diào)用后端接口,即可成功獲取進(jìn)度~ html: JS部分

    2024年02月04日
    瀏覽(30)
  • el-upload批量手動上傳,并用form表單校驗上傳文件

    手動上傳設(shè)置:auto-upload=\\\"false\\\"

    2024年02月14日
    瀏覽(109)
  • element-ui文件上傳el-upload

    element-ui文件上傳el-upload

    ????????element-ui官網(wǎng)中有文件上傳 ????????首先先展示一下我頁面的實現(xiàn)效果,如下圖所示: ?????????從圖中可以看出,我這邊實現(xiàn)的是一個可顯示進(jìn)度條的文件上傳操作,而且如果上傳的文件很大等,還可以中斷文件上傳。 ??????? 值得注意的是,如果有添

    2024年02月05日
    瀏覽(28)
  • element ui ---- el-upload實現(xiàn)手動上傳多個文件

    ui部分 js 實現(xiàn)上傳

    2024年02月15日
    瀏覽(28)
  • Element之el-upload多文件一次性上傳

    Element之el-upload多文件一次性上傳

    方法一: 頁面展示: Html部分代碼: accept 用于限制允許上傳哪些類型文件 name 上傳的文件字段名? (默認(rèn)為 file) multiple 是否支持多選文件 action 必選參數(shù),上傳的地址 headers 設(shè)置上傳的請求頭部 file-list 上傳列表 auto-upload 是否在選取文件后立即進(jìn)行上傳 主要邏輯: 1. 多選文

    2024年02月11日
    瀏覽(22)
  • 【學(xué)習(xí)記錄21】Vue+ElementUI el-upload多文件上傳,一次請求上傳多個文件!

    【學(xué)習(xí)記錄21】Vue+ElementUI el-upload多文件上傳,一次請求上傳多個文件!

    前情回顧說點(diǎn)廢話。。。 1、項目當(dāng)中遇到需要上傳多個圖片,一次選取多個圖片。但是吧el-upload默認(rèn)只能一個一個傳,每次上傳成功還的自己去push,一個一個去判斷。 2、關(guān)鍵是后臺給的接口,要一次性接收一堆,無奈之下只能去網(wǎng)上搜索,大佬們都是給的代碼片段無法直

    2024年02月12日
    瀏覽(95)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包