1.结构
<el-form-item label="附件" prop="filePath" class="item-form-3" v-if="!isDetailPage" >
<el-upload
action=""
:file-list='attchList'//赋值用的
:http-request="uploadImages"
:before-upload="beforeAvatarUpload"
show-file-list
multiple
:on-change="handleChange"//消失的事件
accept=".doc,.docx,.ppt,.pdf,.rar,.zip,.JPG,.JPEG,.PNG,.gif">
<el-button type="primary">上传附件</el-button>
</el-upload>
2.js
//上传文件校验
let filePath=(rule,value,callback)=>{
if(this.dialogForm.filePath.length===0){
return callback(new Error('请上传附件!'))
}else{
callback()
}
};
//校验
dialogFormRules: {
filePath: [
{required: true, validator:filePath, trigger: ['blur', 'change']}
]
}
//上传
beforeAvatarUpload(file) {
if (file.size > 100 * 1024 * 1024) {
this.$message.error('文件不能超过100M');
return false
}
},
uploadImages(val) {
let formData = new FormData()
//key:file与后台对应
formData.append('file', val.file)
http.post(
'/file/upload',
formData,
{
headers: {'Content-Type': 'multipart/form-data'}
}
).then(res => {
if (res.status==0) {
if(res.data.filePath){
this.dialogForm.filePath.push(res.data.filePath);//上传文件路径
}
//判断资料名称是否有值,如果没有值,则把上次附件名称给资料名称赋值
if(!this.dialogForm.materialName){
this.dialogForm.materialName=res.data.message;
}
} else {
this.$message.error(res.message)
}
}).catch((error) => {
console.log(error)
});
},
//上传完成清空验证提示
handleChange(file,fileList){
if(fileList){
this.$refs['dialogForm'].clearValidate()//一定要清空
}
},
赋值
//详情
details(id){
console.log(id,'详情');
materialLibApi.getMaterialLibDetail(id).then(res => {
if(res.status==0){
this.dialogForm.materialName=res.data.materialName;//资料名称
this.dialogForm.sectionCode=res.data.sectionCode;//板块code
this.dialogForm.ifPublic=res.data.ifPublic;//默认非公开
this.dialogForm.fileType=res.data.fileType;//默认软件
//上传赋值
this.attchList = res.data? [{
name: res.data.materialName,
url: res.data.filePath
}] : [];
this.dialogForm.fileFormat=res.data.fileFormat;
this.dialogForm.columnCode=res.data.columnCode;
this.dialogForm.id=id;
}else{
this.$message.error(res.message)
}
}) .catch((error) => {
console.log(`/lib/query/detail?id=${id}详情`, error)
});
},
网友评论