ElementUI的上传文件组件还是不错的，不过给出的demo中是用的action上传。并没有给出自定义上传示例。但是组件是有这样一个接口的。
开始自定义上传
拦截 :http-request="handleUpload
<el-upload
style="width: 300px;"
name="file"
class="upload-demo"
action="upload"
:http-request="handleUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
自定义方法
handleUpload: function (req) {
$.services.fileUpload(req.file).then(function (data) {
if (data.errors.length > 0) {
toast.e(data.errors[0].message);
} else {
oast.i("文件上传成功!");
}
})
},
以上方法上传接口调用都没有问题，关键是组件的状态无法正确表现.官网貌似没有给出具体的说明，但是可以通过回调来通知组件的成功或失败状态。
如一下方式：
handleUpload: function (req) {
$.services.fileUpload(req.file).then(function (data) {
if (data.errors.length > 0) {
req.onError();//通知组件上传失败
toast.e(data.errors[0].message);
} else {
req.onSuccess();//通知组件上传成功
oast.i("文件上传成功!");
}
})
},
尊重作者，转载请注明出处！
版权申明：本文版权归作者所有，未经授权，任何单位或个人不得以任何形式转载、摘编或利用其它方式使用本博客内容。作者保留追究相关法律责任的权利。如需使用博客内容，请与作者联系获得授权。感谢对本文的尊重与支持。
免责声明：本网站所载内容仅供参考，不构成任何专业建议。用户基于本网站内容作出的决策，风险自担。对于因使用本网站内容而产生的任何直接或间接损失，本网站不承担任何责任。请用户审慎判断，理性使用。
