首先是需求場景
<el-dialog class="dialog_1" title="上傳圖片" :visible.sync="dialogFormVisible" :close-on-click-modal='false'
:close-on-press-escape='false' center @closed='closed_cli'>
<el-form :model="form" class="dialog_1_for">
<el-form-item label="過戶後的登記證：" :label-width="formLabelWidth">
<el-upload :class="{hidesse:hideUpload0,'avatar-uploader':true}" multiple action="這裏不需要填或者隨便寫"
list-type="picture-card" :before-upload="beforeAvatarUpload"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList0)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList0,'fileList0')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList0')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList0,'fileList0')" :limit="5"
:file-list="fileList0">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="二手車交易發票：" :label-width="formLabelWidth">
<el-upload multiple :class="{hidesse:hideUpload1,'avatar-uploader':true}" action="這裏不需要填或者隨便寫"
list-type="picture-card"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList1)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList1,'fileList1')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList1')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList1,'fileList1')" :limit="5"
:file-list="fileList1">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="臨牌照片：" :label-width="formLabelWidth">
<el-upload multiple :class="{hidesse:hideUpload2,'avatar-uploader':true}" action="這裏不需要填或者隨便寫"
list-type="picture-card"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList2)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList2,'fileList2')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList2')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList2,'fileList2')" :limit="5"
:file-list="fileList2">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="過戶後的行駛證：" :label-width="formLabelWidth">
<el-upload multiple :class="{hidesse:hideUpload3,'avatar-uploader':true}" action="這裏不需要填或者隨便寫"
list-type="picture-card"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList3)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList3,'fileList3')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList3')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList3,'fileList3')" :limit="5"
:file-list="fileList3">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="交強險批單：" :label-width="formLabelWidth">
<el-upload multiple :class="{hidesse:hideUpload4,'avatar-uploader':true}" action="這裏不需要填或者隨便寫"
list-type="picture-card"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList4)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList4,'fileList4')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList4')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList4,'fileList4')" :limit="5"
:file-list="fileList4">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="其他：" :label-width="formLabelWidth">
<el-upload multiple :class="{hidesse:hideUpload5,'avatar-uploader':true}" action="這裏不需要填或者隨便寫"
list-type="picture-card"
:on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList5)"
:http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList5,'fileList5')"
:on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList5')"
:on-exceed="OnExceed"
:on-remove="(params) =>handleRemove(params,'ruleForm',fileList5,'fileList0')" :limit="5"
:file-list="fileList5">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<div class="up_bottm">
<el-button class="up_bottm_n1" type="success" @click="closed_cli">取消</el-button>
<el-button class="up_bottm_n1" type="primary" @click="uploadgood">開始上傳</el-button>
</div>
</el-dialog>
上面是HTML
下面是邏輯代碼
// 主圖上傳之前
beforeAvatarUpload(file) {
const idJPG =
file.type === "image/jpeg" || file.type === "image/gif" || file.type === "image/png" || file.type === "image/bmp" || file.type === "image/jpg";
if (!idJPG) {
this.$message({
message: '格式不正確',
type: 'warning'
});
}
return idJPG;
},
// 圖片觸發
onChangeMaster(file, fileList, fromData, prop) {
// fileList 當前上傳框的數據
switch (prop) {
case 'fileList0':
{ this.hideUpload0 = fileList.length >= this.limitCount; }
break;
case 'fileList1':
{ this.hideUpload1 = fileList.length >= this.limitCount; }
break;
case 'fileList2':
{ this.hideUpload2 = fileList.length >= this.limitCount; }
break;
case 'fileList3':
{ this.hideUpload3 = fileList.length >= this.limitCount; }
break;
case 'fileList4':
{ this.hideUpload4 = fileList.length >= this.limitCount; }
break;
case 'fileList5':
{ this.hideUpload5 = fileList.length >= this.limitCount; }
break;
default:
break;
}
if (this.inde > 0) {
return
} else {
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
if (existFile) {
this.inde++
this.$message.error(
'圖片重複' + existFile.name
);
fileList.pop()
}
this[prop] = fileList
}
},
// 圖片個數超出限制
OnExceed(file, fileList) {
this.$message.error(
'每個選項最多上傳5張', "error"
);
},
handleRemove(params, fileList, prop, item) {
prop.forEach((obj, index) => {
if (params.uid == obj.uid) {
prop.splice(index, 1)
}
})
setTimeout(() => {
switch (item) {
case 'fileList0':
{ this.hideUpload0 = prop.length >= this.limitCount; }
break;
case 'fileList1':
{ this.hideUpload1 = prop.length >= this.limitCount; }
break;
case 'fileList2':
{ this.hideUpload2 = prop.length >= this.limitCount; }
break;
case 'fileList3':
{ this.hideUpload3 = prop.length >= this.limitCount; }
break;
case 'fileList4':
{ this.hideUpload4 = prop.length >= this.limitCount; }
break;
case 'fileList5':
{ this.hideUpload5 = prop.length >= this.limitCount; }
break;
default:
break;
}
}, 1000)
this.dialogImageUrl = '';
},
handlePictureCardPreview(file, fromData, prop) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeMasterPictureUpload(params, fromData, prop, item) {
this.paramname = item;
var _file = params.file;
this.fileName = params.file.name;
this.isLt2M = params.file.size / 1024 / 1024 <= 10;
this.isLt2M2 += params.file.size;
prop.forEach((obj, index) => {
obj.namenine = item;
this.ayonet.push(obj)
})
},
uploadgood() {
this.isLt2M2 = this.isLt2M2 / 1024 / 1024;
let obj = {};
this.ayonet = this.ayonet.reduce((cur, next) => {
obj[next.uid] ? "" : obj[next.uid] = true && cur.push(next);
return cur;
}, [])
if (this.isLt2M2 > 120) {
this.dialogFormVisible = false;
return this.$message({
message: '總大小不能超過120M',
type: 'warning'
});
}
if (this.isLt2M == true) {
const loading = this.$loading({
lock: true,
text: '正在上傳，請稍後~~~',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.dialogFormVisible = false;
this.ayonet.forEach(file => {
switch (file.namenine) {
case 'fileList0':
this.param.append("register[]", file.raw, file.raw.name); //此處一定是append file.raw 上傳文件只需維護fileList file.raw.name要加上
break;
case 'fileList1':
this.param.append("receip[]", file.raw, file.raw.name);
break;
case 'fileList2':
this.param.append("temporary_plate[]", file.raw, file.raw.name);
break;
case 'fileList3':
this.param.append("driving_license[]", file.raw, file.raw.name);
break;
case 'fileList4':
this.param.append("insurance[]", file.raw, file.raw.name);
break;
case 'fileList5':
this.param.append("other[]", file.raw, file.raw.name);
break;
default:
break;
}
});
const isname = new RegExp("[\u4E00-\u9FA5]+");
if (isname.test(this.fileName)) {
if (this.inde1 > 0) {
return
} else {
this.inde1++
this.$message.error('名稱不能有中文，請重新上傳！');
return false;
}
}
this.param.append('vin', this.datasstr)
axios({
method: 'post',
url: '/Admin/VehicleService/singleUpload',
data: this.param,
responseType: 'text'
}).then(res => {
loading.close();
if (res.data.status == 200) {
this.filedata = [];
this.param = null;
this.param = new FormData();
this.dialogFormVisible = false;
this.$message({
message: res.data.msg,
type: 'success'
});
} else {
this.$message({
message: res.data.msg,
type: 'success'
});
}
this.initAndSearch();
})
.catch(function (error) {
setTimeout(() => {
loading.close();
}, 2000);
});
} else {
this.$message({
message: '文件過大請重新上傳，大小限制10M',
type: 'warning'
});
}
},
closed_cli() {
this.ayonet = [];
this.dialogFormVisible = false;
this.hideUpload0 = false;
this.hideUpload1 = false;
this.hideUpload2 = false;
this.hideUpload3 = false;
this.hideUpload4 = false;
this.hideUpload5 = false;
this.dialogImageUrl = '';
},