el-upload上传文件服务器,vue+elementui 使用el-upload组件实现单个文件手动上传

ref='upload'

style="width: 100%"

:action="uploadUrl"

:on-remove="handleRemove"

:on-change="handleChange"

:data="uploadData"

:file-list="filelist"

:before-upload="handleBeforeUpload"

:auto-upload="false">

选取文件

仅支持上传单个文件

上传到服务器

export default {

data() {

return {

uploadUrl: '',

uploadData: {},

filelist: [],

filelist_temp: [], //仅为判断是否已经上传文件使用

}

},

methods: {

// 附件上传前处理

handleBeforeUpload(file,filelist) {

//处理其他数据

this.uploadData.create_user = ''

this.uploadData.type = ''

},

// 附件移除

handleRemove(file,filelist) {

//this.filelist = filelist //这种方式无法触发手动上传动作

filelist.splice(0,1)

this.file_list_temp = filelist

this.$forceUpdate()

},

// 附件变更、上传成功，上传失败

handleChange(file,filelist) {

if(file.status === 'ready') {

// 附件变更

//this.filelist = filelist //这种方式无法触发手动上传动作

if(filelist.length > 1) {

filelist.splice(0,1)

}

this.file_list_temp = filelist

this.$forceUpdate()

}else if(file.status === 'success') {

this.$message({

type: 'success',

message: '上传附件成功！'

})

}else {

this.$message({

type: 'error',

message: '上传附件失败，请重试！'

})

}

},

// 上传到服务器

submitUpload() {

// if(this.filelist.length > 0) //

if(this.filelist_temp.length > 0) {

this.$refs.upload.submit()

}else {

this.$message({

type: 'info',

message: '请先上传附件！'

})

}

},

}

}