使用Upload組件實現文件上傳,如果要使用upload,需要引入ElementUI,所以一般建議,如果使用了ElementUI做UI控件的話,則可以考慮使用Upload組件來實現文件上傳。
<el-upload
style="display:inline"
:show-file-list="false"
:on-success="onSuccess"
:on-error="onError"
:before-upload="beforeUpload"
:action="/system/basicimport">
<el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>
相關參數的含義:
1. on-success 文件上傳成功時的鉤子
2. on-error 文件上傳失敗時的鉤子
3. before-upload 上傳文件之前的鉤子,參數爲上傳的文件,若返回 false 或者返回 Promise 且被 reject,則停止上傳。
4. action 調用的是後臺上傳的接口。
onSuccess(response,file,fileList){
this.enabledUploadBtn=true;
this.uploadBtnIcon='el-icon-upload2';
this.btnText ='上傳';
}
onError(err,file,fileList){
this.enabledUploadBtn = true;
this.uploadBtnIcon='el-icon-upload2'
this.btnText='上傳';
}
beforeUpload(file){
this.enabledUploadBtn=false;
this.uploadBtnIcon ='el-icon-loading';
this.btnText='正在上傳';
}
1. 文件開始上傳時按鈕置灰(不可點擊),同時可以更改上傳按鈕的圖標和文本。
2. 文件上傳成功後,按鈕可以點擊。同時對上傳按鈕的圖標和文本進行了更改。
注:記得要在data中對enabledUploadBtn賦值。如果沒有對enabledUploadBtn定義則無法實按鈕的置灰功能。
export default {
data() {
return {
enabledUploadBtn:false,
}
}
}