深圳福田做网站公司,网站设计团队介绍,app制作平台推荐,百度搜索简述
使用过若依框架的#xff0c;一定知道若依前端框架上传图片的样式#xff0c;是一个正方形加号图片#xff0c;但是如果你要使用自定义样式呢。 比如将下面这个图进行修改呢 修改后的样式 你可以直接找到element-ui 修改上传图片的组件#xff0c;也可以加入新的组…简述
使用过若依框架的一定知道若依前端框架上传图片的样式是一个正方形加号图片但是如果你要使用自定义样式呢。 比如将下面这个图进行修改呢 修改后的样式 你可以直接找到element-ui 修改上传图片的组件也可以加入新的组件让两个都存在
代码
templatediv classcomponent-upload-imageel-uploadmultipledrag:actionuploadImgUrllist-typepicture-card:on-successhandleUploadSuccess:before-uploadhandleBeforeUpload:limitlimit:on-errorhandleUploadError:on-exceedhandleExceedrefimageUpload:on-removehandleDelete:show-file-listtrue:headersheaders:file-listfileList:on-previewhandlePictureCardPreview:class{hide: this.fileList.length this.limit}div classel-upload__text将文件拖到此处或em点击上传/em/div/el-upload!-- 上传提示 --div classel-upload__tip slottip v-ifshowTip请上传template v-iffileSize 大小不超过 b stylecolor: #f56c6c{{ fileSize }}MB/b /templatetemplate v-iffileType 格式为 b stylecolor: #f56c6c{{ fileType.join(/) }}/b /template的文件/divel-dialog:visible.syncdialogVisibletitle预览width800append-to-bodyimg:srcdialogImageUrlstyledisplay: block; max-width: 100%; margin: 0 auto//el-dialog/div
/templatescript
import { getToken } from /utils/auth;export default {props: {value: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如[png, jpg, jpeg]fileType: {type: Array,default: () [png, jpg, jpeg],},// 是否显示提示isShowTip: {type: Boolean,default: true}},data() {return {number: 0,uploadList: [],dialogImageUrl: ,dialogVisible: false,hideUpload: false,uploadImgUrl: process.env.VUE_APP_BASE_API /common/upload, // 上传的图片服务器地址headers: {Authorization: Bearer getToken(),},fileList: []};},watch: {value: {handler(val) {if (val) {// 首先将值转为数组const list Array.isArray(val) ? val : this.value.split(,);// 然后将数组转为对象数组this.fileList list.map(item {if (typeof item string) {item { name: item, url: item };}return item;});} else {this.fileList [];return [];}},deep: true,immediate: true}},computed: {// 是否显示提示showTip() {return this.isShowTip (this.fileType || this.fileSize);},},methods: {// 上传前loading加载handleBeforeUpload(file) {let isImg false;if (this.fileType.length) {let fileExtension ;if (file.name.lastIndexOf(.) -1) {fileExtension file.name.slice(file.name.lastIndexOf(.) 1);}isImg this.fileType.some(type {if (file.type.indexOf(type) -1) return true;if (fileExtension fileExtension.indexOf(type) -1) return true;return false;});} else {isImg file.type.indexOf(image) -1;}if (!isImg) {this.$modal.msgError(文件格式不正确, 请上传${this.fileType.join(/)}图片格式文件!);return false;}if (this.fileSize) {const isLt file.size / 1024 / 1024 this.fileSize;if (!isLt) {this.$modal.msgError(上传头像图片大小不能超过 ${this.fileSize} MB!);return false;}}this.$modal.loading(正在上传图片请稍候...);this.number;},// 文件个数超出handleExceed() {this.$modal.msgError(上传文件数量不能超过 ${this.limit} 个!);},// 上传成功回调handleUploadSuccess(res, file) {console.log( res)console.log( res.code)if (res.code 200) {this.uploadList.push({ name: res.url, url: res.url });this.uploadedSuccessfully();} else {this.number--;this.$modal.closeLoading();this.$modal.msgError(res.msg);this.$refs.imageUpload.handleRemove(file);this.uploadedSuccessfully();}},// 删除图片handleDelete(file) {const findex this.fileList.map(f f.name).indexOf(file.name);if (findex -1) {this.fileList.splice(findex, 1);this.$emit(input, this.listToString(this.fileList));}},// 上传失败handleUploadError() {this.$modal.msgError(上传图片失败请重试);this.$modal.closeLoading();},// 上传结束处理uploadedSuccessfully() {if (this.number 0 this.uploadList.length this.number) {this.fileList this.fileList.concat(this.uploadList);this.uploadList [];this.number 0;this.$emit(input, this.listToString(this.fileList));this.$modal.closeLoading();}},// 预览handlePictureCardPreview(file) {this.dialogImageUrl file.url;this.dialogVisible true;},// 对象转成指定字符串分隔listToString(list, separator) {let strs ;separator separator || ,;for (let i in list) {if (list[i].url) {strs list[i].url.replace(this.baseUrl, ) separator;}}return strs ! ? strs.substr(0, strs.length - 1) : ;}}
};
/script
style scoped langscss
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {transition: all 0s;
}::v-deep .el-list-enter, .el-list-leave-active {opacity: 0;transform: translateY(0);
}
::v-deep .el-upload-list--picture-card .el-upload-list__item{width: 360px;height: 173px;
}
::v-deep .el-upload--picture-card{width: 360px;height: 173px;
}
/style
