亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

1. 需求

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

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

2. 思路

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

參數(shù)說明
data上傳時附帶的額外參數(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 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)的文章就介紹到這了,更多相關(guān)Element UI 文件上傳帶參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論