我要评论使用elementui中的el-upload组件来实现文件上传
http-request：允许使用自定义的方法来处理文件上传的请求。
before-upload：是element ui的<el-upload>组件的一个钩子函数，它在上传文件之前被调用。你可以在这个钩子中进行一些自定义的校验或者操作。例如设置上传文件大小
on-change：on-change 事件在文件状态改变时触发。这里的文件状态通常指上传进度的变化或者上传操作的成功/失败。on-change 事件的处理函数会接收一个参数，该参数是一个对象，包含了文件的相关信息，如 file（文件对象），filelist（文件列表），name（事件名称）等。
<span>
<el-form-item label="文件地址：" prop=""/>
</span>
<el-upload
ref="upload"
:file-list="formfileuploadform"
:http-request="handleuploadform"
:on-change="handlechange"
:before-upload="beforeupload"
:show-file-list="false"
:auto-upload="false"
class="upload-demo"
action=""
>
<el-input v-model = 'uploadform.file' type="primary" readonly styele="width:240px;line-height:0px;padding-right:20px">
<el-button size="mediumtwo" type="primary">预览</el-button>
</el-upload>handleuploadform(params){
const formdata = new formdata()
formdata.append('file',param.file)
form.append('filename','')
axios({
url:'',
methods:'post',
headers:{'content-type':'multipart/form-data'},
data:formdata
}).then(res=>{
if(res.data.code==200){
return this.$pop(res.data.data,'success',this)
}else{
return this.$pop(res.data.message,'warning',this)
}
}).catch(err=>{
return this.$pop(error,'error',this)
}
})
}beforeupload(file) {
console.log('文件上传前的校验', file);
// 这里可以进行一些文件的校验，比如文件类型，文件大小等
// 返回 false 或者返回一个 promise 对象，promise 对象 reject 时不会上传文件
return new promise((resolve, reject) => {
if (file.size / 1024 / 1024 > 2) {
this.$message.error('文件大小不能超过 2mb!');
reject(new error('文件大小不能超过 2mb!'));
} else {
resolve(file);
}
});
}, handlechange(response, file, filelist) {
if (response.status === 'success') {
console.log('文件上传成功', file);
} else if (response.status === 'error') {
console.log('文件上传失败', file);
}
}总结
到此这篇关于elementui中el-upload文件上传实现的文章就介绍到这了,更多相关el-upload文件上传内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论