欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能

 更新時(shí)間：2023年08月10日 11:05:28   作者：柯曉楠  
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡(jiǎn)單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧

1. 需求

在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí)，如果單文件上傳是比較簡(jiǎn)單的，但是在實(shí)際需求中，往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù)，效果如下圖：

在上傳指定類型的文件時(shí)，例如HTTPS證書的文件類型必須為 .jks 格式，還必須要伴隨一些額外的參數(shù)。

2. 思路

el-upload 上傳組件提供了一些參數(shù)：

參數(shù)說明
data上傳時(shí)附帶的額外參數(shù)
accept

3. 示例代碼

HTML代碼：

<div class="upload-button">
  <el-upload
    ref="certificateUpload"
    class="upload-container"
    :action="uploadAPI"
    :auto-upload="false"
    name="multipartFile"
    :with-credentials="true"
    :data="uploadObjs"
    :file-list="fileList"
    accept=".jks"
    :before-upload="onBeforeUpload"
    :before-remove="onBeforeRemove"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
    :on-change="onUploadChange"
  >
   <el-button type="primary" size="mini" icon="el-icon-upload2">選擇證書</el-button>
  </el-upload>
</div>

JS代碼：

export default {
	data() {
		return {
			uploadAPI: '',
			uploadObjs: {},
			fileList: []
		}
	},
	methods: {
		// 文件上傳前鉤子
		onBeforeUpload() {
			// 可以在上傳前的鉤子函數(shù)中添加額外參數(shù)
			this.uploadObjs = {
				... // 添加的參數(shù)字段
			}
		},
		onBeforeRemove() {
		},
		onUploadSuccess() {
		},
		onUploadError() {
		},
		onUploadChange() {
		}
	}
}

到此這篇關(guān)于Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)的文章就介紹到這了,更多相關(guān)Element UI 文件上傳帶參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論