手動上傳【通過自定義點擊事件上傳】,el-upload 組件需要先綁定 ref
- 取消默認 "自動上傳功能" 沪曙。
屬性 auto-upload 設為 false - 自定義點擊事件 <el-button @click="uploadBtn">上傳</el-button>
- 觸發(fā)上傳方法 this.$refs.???.submit();
<el-upload
ref="uploadRef"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
>
<el-button size="small" type="primary" @click="uploadBtn">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件惋耙，且不超過500kb</div>
</el-upload>
methods:{
uploadBtn(){
this.$refs.uploadRef.submit()
}
}
自定義上傳方法
屬性 http-request
<el-upload
ref="uploadRef"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="httpRequest"
>
<el-button size="small" type="primary" @click="uploadBtn">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件欣孤，且不超過500kb</div>
</el-upload>
import axios from 'axios'
methods:{
httpRequest(){
axios({
url:'https://jsonplaceholder.typicode.com/posts/',
method:'post'
}).then(res => {
console.log("數(shù)據(jù)處理")
})
}
}
注意：使用自定義上傳方式http-request，與 auto-upload:false 一起使用時疹尾，選擇文件后http-request方法不會觸發(fā)。這時就需要配合手動上傳≡穑或者使用自動上傳，在httpRequest 方法里做判斷也可以艇搀。
