teleplment
<!-- 图片 -->
<el-row>
<el-col :span="17">
<el-form-item label="图片:" prop="files">
// 添加、编辑
<el-upload
v-if="queryType != 'look'"
action=""
accept=".jpg,.png,.jpeg,.gif"
list-type="picture-card"
:limit="5"
:before-upload="beforeAvatarUpload"
:http-request="beforeUploadss"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChange"
:file-list="addruleForm.files"
:class="uploadDisabled ? 'disabled' : ''"
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png/jpeg文件,且不超过10MB,最佳比例为1:1,最大上传量5张
</div>
</el-upload>
// 查看
<div v-else>
<el-image
v-for="(item, index) in imageUrlArr"
:key="index"
style="width: 100px; height: 100px"
:src="item.url"
fit="cover"
@click="handlePictureCardPreview(item)"
></el-image>
</div>
// 点击图片 出现弹框的组件(查看图片)
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
</el-col>
<el-col :span="7">
<div class="txt">图片</div>
</el-col>
</el-row>
data中的变量
data() {
return {
queryType: "", // 0新增,1编辑,2查看
uploadDisabled: false, // 文件超过5个 上传按钮不显示
dialogImageUrl: "", // 查看图片所需要的路径
dialogVisible: false, // 查看图片的弹框
imageUrlArr: [], // 查看图片的数组
addruleForm: {
files: [], // 添加,编辑绑定的文件
},
addrules: {
files: [{ required: true, message: "请上传证件照", trigger: "blur" }]
}
}
methods中上传所用到的方法
methods: {
// 上传
handleChange(file, fileList) {
let $this = this;
// 事件两个参数,参数file与fileList是同时有值的。
let a = 0;
fileList.forEach((item, index) => {
//在此处,对比文件名,将文件名相同的对比次数累加,
// 相同的文件名累加值为 2 时,说明文件名已经重复,直接删掉。
if (file.name === item.name) {
a++;
if (a === 2) {
this.$message({
message: "文件名不能重复",
type: "info",
});
fileList.splice(index, 1);
}
$this.addruleForm.files = fileList;
}
});
// 超过5张去掉上传文件的按钮
if (fileList && fileList.length >= 5) {
$this.uploadDisabled = true;
}
},
// 上传删除
handleRemove(file, fileList) {
let $this = this;
// 小于5张将上传按钮释放
if (fileList && fileList.length < 5) {
$this.uploadDisabled = false;
}
$this.addruleForm.files = fileList;
},
// 点击文件 弹出框用来查看图片
handlePictureCardPreview(file) {
let $this = this;
$this.dialogImageUrl = file.url;
$this.dialogVisible = true;
},
// 上传 文件大小 文件格式的校验
beforeAvatarUpload(file) {
let $this = this;
const isLt5M = file.size / 1024 / 1024 < 10;
const isJPG =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/gif" ||
file.type === "image/jpg";
if (!isJPG) {
$this.$message.error("上传图片只能是 jpg/jpeg/png 格式!");
}
if (!isLt5M) {
$this.$message.error("上传图片大小不能超过 10MB!");
}
return isJPG && isLt5M;
},
// 禁止自动上传
beforeUploadss() {
return false;
},
// 添加
async addRole() {
var $this = this;
const { addruleForm } = $this;
var ss = [];
let formdata = new FormData(); // 后台需要的file文件按格式
for (var i in addruleForm) {
if (i == "files") {
addruleForm[i].forEach((item) => {
ss.push({ filenames: item.name });
formdata.append("files", item.raw);
});
} else {
formdata.append(i, addruleForm[i]);
}
}
formdata.append("filesName", JSON.stringify(ss));
var res = await $this.$axios({
method: "post",
url: "xxx",
data: formdata,
});
if (res.data.code == 0) {
$this.$message.success("操作成功");
$this.$router.go(-1);
} else {
$this.$message({
message: res.data.message,
type: "error",
});
}
},
// 获取该条数据 相当于数据回显
async userData() {
var $this = this;
$this
.$axios({
method: "get",
url:'xxx', // 对应的接口
params: {
id: $this.main_id,
},
})
.then(function (res) {
let rd = res.data;
if (rd.code == 0) {
$this.addruleForm = rd.data.data[0];
if (rd.data.data[0].identification_photo!= "[]") {
$this.addruleForm.files = JSON.parse(
rd.data.data[0].identification_photo
);
// 查看文件的回显
$this.imageUrlArr = JSON.parse(
rd.data.data[0].identification_photo
);
} else {
$this.addruleForm.files = [];
}
} else {
$this.$message({
message: rd.message,
type: "error",
});
}
});
},
}