<el-form-item label="证明材料:" id="supmeta">
<el-upload
class="avatar-uploader"
ref="otherLicense"
action
:auto-upload="false"
:on-preview="handlePicPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="otherSectionFile"
list-type="picture-card"
multiple
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" class="avatar" />
</el-dialog>
</el-form-item>
data() {
return {
fileList: {},
dialogVisible: false,
dialogImageUrl: "",
};
},
handlePicPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemove(file, fileList) {
this.fileList.map((item, index) => {
if (item.uid == file.uid) {
this.fileList.splice(index, 1);
}
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
otherSectionFile(file) {
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
const isLt3M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error("只能是图片!");
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
if (!isLt3M) {
this.$message.error("上传图片大小不能超过 3MB!");
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
this.otherFiles = file.raw;
// FormData 对象
var formData = new FormData();
// 文件对象
formData.append("file", this.otherFiles);
formData.append("filePath", "yuanchengyiliao");
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
methods: "post",
};
//调取接口,这里我的接口是封装好的
this.$axios.bussUpload(formData, config).then((res) => {
this.fileList.push(file);
if (res.data.flag == "S") {
this.otherPhotoObj = res.data.data.objectId;
this.otherPhoto = res.data.data.url;
this.otherLicense.push({
certificationName: this.form.certificationName,
certificationObj: this.otherPhotoObj,
certificationUrl: this.otherPhoto,
});
} else {
this.$message.error(res.data.message);
}
});
},