<el-form-item label="一号位图:" prop="pgUrl1">
<el-upload
action=""<!--指定上传地址,我要自己上传,这样可以防止服务器上产生垃圾数据-->
:http-request="gprequestUpload1"<!--覆盖后的上传方法-->
list-type="picture-card"<!--设置上传框的模式多图形式,文本形式-->
:show-file-list="true"<!--是否显示已上传文件列表-->
:on-remove="handleRemove""<!--文件列表移除文件时的钩子-->
:file-list="gpfileList1"<!--文件列表,用来做默认显示。-->
:on-preview="handlePictureCardPreview"<!--预览的方法-->
:class="{hide: uploadHide}"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog
:visible.sync="dialogVisible"
title="预览"
width="800"
append-to-body
>
<img
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
</el-dialog>
</el-form-item>
<div slot="footer" class="text-center">
<el-button type="primary" @click="gpsubmitForm">确 定</el-button>
<el-button @click="gpcancel">取 消</el-button>
</div>
data() {
return {
gpfileList1: [],
uploadHide:false,
dialogImageUrl: "",
dialogVisible: false,
}
}
methods: {
handleGoodsPic(row) {
this.reset()
const gid = row.gId
this.form.gId = gid
this.gpopen = true
this.gploading = false
this.gptitle = '详情图'
this.gpfileList1.push({
name: "1",
url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
}, {
name: "2",
url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
})
this.uploadHide = true;
},
//提交方法
gpsubmitForm: function () {
console.log(this.gpform.pgUrl1)
let formData = new FormData()
formData.append('avatarfile', this.gpform.pgUrl1)
formData.append('gId', this.form.gId)
imgupload(formData).then(response => {
this.$modal.msgSuccess('操作成功')
this.gpopen = false
})
},
gpcancel() {
this.gpopen = false
this.reset()
},
//覆盖后的上传方法
gprequestUpload1(file) {
this.uploadHide = true;
this.gpform.pgUrl1 = file;
},
//上传前的方法,用户判断尺寸、大小、类型
gpbeforeUpload(file) {
const isJPG =
file.type === "image/jpg" ||
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/gif";
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isJPG) {
this.$message.error("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
}
if (!isLt2M) {
this.$message.error("上传图片不能大于10M");
}
const isSize = new Promise(function (resolve, reject) {
let width = 378;
let height = 200;
let _URL = window.URL || window.webkitURL;
let image = new Image();
image.onload = function () {
let valid = image.width == width && image.height == height;
valid ? resolve() : reject();
};
image.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
this.$message.error("上传头像图片尺寸不符合,只能是378*200");
return Promise.reject();
}
);
return isJPG && isLt2M && isSize;
},
//删除方法获取到的file是被删除的file
handleRemove(file) {
this.gpfileList1 = [];
this.uploadHide = false;
},
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
reset() {
this.gpfileList1 = [],
},
}
<style>
.hide .el-upload--picture-card {
display: none;
}
//去除动画
.el-list-enter-active,
.el-list-leave-active {
transition: all 0s;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/188077.html