上传组件
本次调用不执行立即上传
<el-upload
class="upload-demo"
ref="fileUpload"
action="${base}/survey/surveyConfirmFile/uploadFile"<!--必选参数,上传的地址-->
:on-preview="downloadFileMethod"<!--点击文件列表中已上传的文件时的钩子-->
:on-change="fileChange"<!--文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用-->
:before-upload="beforeUpload"<!--上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传,会触发beforeRemove和handleRemove方法-->
:auto-upload="false"<!--是否在选取文件后立即进行上传-->
:on-remove="handleRemove"<!--文件列表移除文件时的钩子-->
:on-success="handleSuccess"<!--文件上传成功时的钩子-->
:on-exceed="handleExceed"<!--文件超出个数限制时的钩子-->
:before-remove="beforeRemove"<!--删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。-->
multiple<!--是否支持多选文件-->
:limit="3"<!--最大允许上传个数-->
:file-list="fileList"<!--上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]-->
:data="uploadData"><!-- 上传时附带的额外参数-->
<el-button size="small" type="primary">上传附件</el-button>
</el-upload>
确定上传按钮
shareSubmit(){
this.$refs.fileUpload.submit();
}
文件上传方法
//文件上传
handleRemove(file, fileList) {
let that=this
if (file && file.status==="success") {//有可能是未上传过的文件
//Todo 删除上传的文件
get(that.getFileUrl,{filename:file.name,confirmid:that.shareForm.confirmId}, that).then(function (response) {
for (let i = 0; i <response.data.data.length;i++) {
that.fileurl = response.data.data[i];
post(that.deleteFileUrl,that.fileurl , that).then(function (response) {
})
}
})
}
that.fileList = fileList;
},
handleSuccess(response,file, fileList){
//this.fileList = fileList;
},
fileChange(file,fileList){
this.fileList = fileList
},
beforeUpload(file){
this.uploadData.confirmIds = [];
if(this.shareForm.confirmId != null && this.shareForm.confirmId !=''){
this.uploadData.confirmIds.push(this.shareForm.confirmId);
}
if(this.fileList.length>0) {
let repeatLength = 0
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].name == file.name) {
repeatLength++
}
}
if(repeatLength>=2){
this.$message.error('文件重名');
this.fileRepeat = true
return false
}
}
},
beforeRemove(file, fileList) {
if (file && file.status==="success") {//有可能是未上传过的文件
return this.$confirm(`确定移除文件?`)
}
},
handleExceed(files, fileList){
if(fileList.length==3){
this.$message.error('超出文件上传数量');
}
},
downloadFileMethod(file){
let that = this;
event.preventDefault();
let link = document.createElement('a')
link.style.display = 'none'
link.href = '${base}/'+file.url
link.setAttribute('download', file.name)
document.body.appendChild(link)
link.click();
}