element-文件上传-自定义上传方式
这次主要写的是el-upload这个组件中的http-request钩子,首先来看一下官方的:
非常的简洁,简洁到完全看不懂了,简直了。
先展示一下我的成果,记得先把jquery,vue,element引入
这里实现了上传成功的回调和进度条的显示。失败的回调可以参考成功回调的方式写,差不多我就没写了。
var el_my_uploader = Vue.extend({
props: ["maxSize", "maxCount", "fileList", "UploadUrl", "accept", "drag", "multiple"],
template: '<div >' +
'<el-upload :action="UploadUrl" :limit="maxCount" :on-exceed="handleExceed" ' +
' :before-upload="beforeUpload" :file-list="uploadFiles" :accept="accept" ' +
' :on-preview="handlePreview" ' +
' :before-remove="beforeRemove" :drag="drag" :multiple="multiple"' +
' :on-success="handleSuccess" :http-request="handleUpload">' +
'<slot>' +
'<el-button size="small" type="primary">点击上传</el-button>' +
'</slot>' +
'<slot name="tip" slot="tip"></slot>' +
'</el-upload>' +
'</div>',
data: function() {
var obj = {
uploadFiles: [],
uploaderId: ''
}
return obj;
},
created: function() {
if (!this.fileList) {
this.fileList = [];
}
this.uploadFiles = this.fileList;
},
methods: {
handleExceed(files, fileList) {
// 上传数量超限
this.$message.warning(`当前限制选择 ${
this.maxCount} 个文件`);
return false;
},
handlePreview(file) {
// 点击文件列表下载事件
if (file.state && file.state != 1)