<!-- :before-remove="()=>false" 禁止删除-->
<!-- :on-remove="handleRemove" 删除 -->
<el-upload
ref="upload"
:limit='5'
:on-remove="handleRemove"
:on-error="onError"
:on-preview="handlePreview"
:file-list="careA.fileList"
:auto-upload="false"
:http-request="uploadFile"
:on-change="handChange"
action="string"
multiple="multiple"
>
<el-button slot="trigger" type="primary" >点击上传</el-button>
</el-upload>
:limit 限制上传的文件数量
:on-remove 删除文件时触发的钩子函数
// 移除附件
handleRemove(file, fileList) {
console.log('移除附件...')
console.log(file);
let pla=this.careA.fileList.indexOf(file)
console.log(this.careA.fileList.indexOf(file));
console.log(pla);
this.careA.fileList.splice(pla,1)
console.log(this.careA.filePath);
let s=this.careA.filePath.split(',')
s.splice(pla,1)
console.log(s);
this.careA.filePath=s.join(',')
if(s===[]){
this.careA.filePath=''
}
console.log(this.careA.filePath);
this.careA.uploadArr=[]
},
:on-preview 点击文件时触发的预览的钩子函数
//预览附件
handlePreview(file){
window.open(file.url)
},
:file-list 绑定的文件列表(数组形式)
:auto-upload 是否自动上传
:http-request 手动上传的钩子函数(本人没使用)
:on-change 当文件列表发生改变时触发的钩子函数(本人一般是在这里同步提交文件,获得后端返回的文件路径)
handChange(s,fileList){
console.log(s);
this.careA.fileList=fileList
console.log(this.careA.fileList);
this.submitUpload()
},
// 附件检查
// 检查附件是否属于可上传类型
// 检查附件是否超过限制大小
checkFile() {
var flag = true
var tip = ''
var files = this.$refs.upload.uploadFiles
files.forEach(item => {
// 文件过大
if (this.size !== null && this.size !== '' && item.size > this.fileSize * 1024 * 1024) {
flag = false
tip = ' 文件超过' + this.fileSize + 'M'
this.careA.fileList.pop()
}
// 文件类型不属于可上传的类型
if (this.fileType !== null && this.fileType !== '' && !this.fileType.includes(lastSubstring(item.name, '.'))) {
flag = false
tip = ' 文件类型不可上传'
this.careA.fileList.pop()
}
})
if (!flag) {
message('error', tip)
}
return flag
},
// 提交附件(在这里上传)
submitUpload() {
if (this.checkFile()) {
this.careA.fileList.forEach((item) => {
// 判断文件名的类型
const formData = new FormData();
formData.append("theme", this.theme);
formData.append("file", item.raw);
// console.log(item.raw);
// console.log(formData) ;
axios({
url: `${process.env.VUE_APP_BASE_API}/file/upload`,
method: "post",
data: formData,
headers: {
"Content-Type": "multipart/form-data;charset=utf-8",
token: `${getToken()}`,
},
})
.then((res) => {
// console.log(res);
// console.log(this.careA.uploadArr );
const flag = this.careA.uploadArr.indexOf(res.data.data.fileName);
if (flag != -1) {
return false;
}
this.careA.uploadArr.push(res.data.data.fileName);
// console.log(this.careA.uploadArr);
console.log("进入一次");
if (this.careA.filePath) {
this.careA.filePath = this.careA.filePath + "," + res.data.data.fileId;
} else {
this.careA.filePath = res.data.data.fileId;
}
console.log(this.careA.filePath);
})
.catch((err) => {
console.log(err);
});
});
}
},