手动上传【通过自定义点击事件上传】,el-upload 组件需要先绑定 ref
- 取消默认 "自动上传功能" 。
属性 auto-upload 设为 false - 自定义点击事件 <el-button @click="uploadBtn">上传</el-button>
- 触发上传方法 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("数据处理")
})
}
}
注意：使用自定义上传方式http-request，与 auto-upload:false 一起使用时，选择文件后http-request方法不会触发。这时就需要配合手动上传。或者使用自动上传，在httpRequest 方法里做判断也可以。
