问题：在vue项目中如何使用element-ui的照片墙功能？

遇到的问题：
在vue项目中如何使用element-ui的照片墙功能，限制只上传9张照片fileList？尤其是在编辑的情况下。

解决方法：

<el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card"multiple:headers="headers":before-upload="beforeadUrlUpload":on-success="handleAddUrlSucess":on-error="unpladError":on-preview="handlePictureCardPreview":on-remove="handleRemove":limit="9":file-list="fileList"><i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

<script>
export default{data:function(){return {dataList: {refUrl: []},fileList: [],dialogVisible: false,headers: {Authorization:localstorage.getItem("token")}}},methods:{//图片信息回显formRest(){this.dataList.refUrl = JSON.parse(JSON.stringify(this.editForm.refUrl));if(this.dataList.refUrl != "" && this.dataList.refUrl != null){this.dataList.refUrl.map((item,index)=>{this.fileList.push({"url":"/api/test/get/photo?fileId="+item})})}},//上传图片之前beforeadUrlUpload(file){const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;},//上传图片成功handleAddUrlSucess(res, file) {if(this.dataList.refUrl != null){this.dataList.refUrl.push(res.data.fileId);}eles{this.dataList.refUrl = [];this.dataList.refUrl.push(res.data.fileId);}},//上传图片失败uploadError(){this.$message.error("上传失败，请重新上传！");},//大图预览handlePictureCardPreview(file, fileList){this.dialogVisible = true;if(file.response != null){this.dialogImageUrl = "/api/test/get/photo?fileId="+file.response.data.fileId;}else{this.dialogImageUrl = "/api/test/get/photo?fileId="+file.url.split("=")[1];}},//删除图片handleRemove(file, fileList){this.dataList.refUrl.map((item,index)=>{if(file.response != null){if(item == file.response.data.fileId){this.dataList.refUrl.splice(index,1);}}else{if(item == file.url.split("=")[1]){this.dataList.refUrl.splice(index,1);}}})}}}
</script>

问题：在vue项目中如何使用element-ui的照片墙功能？相关推荐

在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
在vue2.x项目中怎么引入Element UI
参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
前几天vue项目中需要使用百度地图的路数功能制作历史轨迹,为了离线时也可以正常计算路程等,所以这里选择使用原生离线去实现路书这里放出百度的官方示例:地图JS API示例 | 百度地图开放平台我先用 ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
转：如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
vue项目中的回车登录
vue项目中的回车登录:(搭配element ui 的使用如果是原生,@keyup.enter="login(form)"就可以了) 在密码框上加代码:v-model=" ...

问题：在vue项目中如何使用element-ui的照片墙功能？

问题：在vue项目中如何使用element-ui的照片墙功能？相关推荐

最新文章

热门文章