Element Upload 上传图片

最近跟element结下不解之缘，很多地方用到组件。

这篇文章主要记录使用Element Upload 上传图片组件的过程。

Upload 上传图片组件：https://element.eleme.cn/#/zh-CN/component/upload

需求：弹窗内上传图片

代码：

引入element步骤省略，有需要可以到element官网查询

element安装：https://element.eleme.cn/#/zh-CN/component/installation

1、页面布局：

说明：Element Upload 上传图片组件包含多种形式，这里使用照片墙。

<!-- 点击按钮触发弹窗 -->
<el-button type="warning" icon="el-icon-plus" size="small" class="addCategory" @click="addActivity(),addShow=true"
>添加活动</el-button>
<!-- 弹窗 -->
<el-dialog title="添加运营活动" :visible.sync="addShow"><el-form><el-form-item label="活动图片" :label-width="formLabelWidth" prop="addImg"><el-upload  :class="{hide:hideUpload,show:showUpload}":action="baseUrl" ref="upload" list-type="picture-card":auto-upload="false" :on-change="onChange" :on-remove="handleRemove" :http-request="fileLists" :limit="1"><i slot="default" class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addShow = false">取 消</el-button><el-button type="primary" @click="addUpLoads(),addShow = false">确 定</el-button></div>
</el-dialog>

弹窗内容只展示了关于上传图片的部分，其余不赘述。

另外，Upload组件照片墙默认可上传多张照片，需求规定只能上传一张，可以设置:limit="1"，但遇到另一个问题，上传一张照片后，上传部分依然存在，类似：

明显这是不合理的，所以我们进行处理，组件动态绑定class，而决定class是否生效的值，在on-change 和 on-remove 绑定的方法中进行判断。

样式如下：

<style>
/deep/.hide .el-upload--picture-card {display: none;
}
/deep/.show .el-upload--picture-card {display: block;
}
</style>

注意：/deep/ 为深度选择器，在修改组件样式时很常用

附上所用组件的相关属性和方法：

更多详细属性及方法可查看：https://element.eleme.cn/#/zh-CN/component/upload

2、js

<script>
export default {data(){return{addShow:false,  // 弹窗出现/隐藏formLabelWidth:'120px',  // 弹窗内每行表单标题宽度baseUrl:'http://...',  // 上传的接口地址，baseUrl是必传属性，这里不是自动上传，所以随便给出一个上传地址即可dialogVisible: false,dialogImageUrl: '',fileImgUrl:'',  // 图片地址hideUpload: false,showUpload: false,}},methods:{// 文件状态改变时，添加文件、上传成功和上传失败时都会被调用onChange(file, fileList){// 以上提到照片墙可传入多个图片，但这里只需要传入一个，所以做处理// 且当已传入照片时，隐藏上传组件this.hideUpload = fileList.length >= this.limitCount;this.fileImgUrl = fileList[0].url;},// 文件列表移除文件时的钩子handleRemove(file, fileList){// 当删除照片时，显示上传组件this.showUpload = fileList.length < this.limitCount;this.fileImgUrl = '';},// http-request覆盖默认的上传行为，可以自定义上传的实现（调用接口上传图片）fileLists(val){let userToken = localStorage.getItem("userToken"); //接口要求传入token，看具体接口需求// 以下部分为接口所需其他传参，按需传入即可let fd = new FormData(); let file = val.file;fd.append("picture",file);fd.append("activityStartTime",this.startTime);fd.append("activityEndTime",this.endTime);fd.append("activityName",this.addForm.addName);fd.append("activityTag",this.value);fd.append("activityType",this.radioValue);fd.append("singleProduct",this.goodsNum);// 请求头let headers = {"Content-Type": "multipart/form-data",// 请求头内Content-Type一定要是form-data格式'Authorization':userToken}this.$http.post(url.saveActivity,fd,{headers}).then((res) => {if (res.data.code === 0) {this.$message({message: res.data.msg,type:"success",});}else{this.$message({message: res.data.msg,type: "error",});}this.getActivityList();  //新增成功调取列表接口刷新页面});},}
}
</script>

备注：我最开始失败是败在了接口其他传参部分，所以大家用也要留意这部分的传入方式。

如果接口只需传入文件，无需其他传参，那就可以省略掉以下部分

以上就是Element Upload 上传图片组件使用的过程详解，希望能帮助到你。

欢迎大家提出问题！

Element Upload 上传图片相关推荐

element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
vue 项目 upload上传图片并实现拖拽排序
upload 上传图片并实现拖拽功能 1.npm i -S vuedraggable 2.//页面引入 import draggable from "vuedraggable" c ...
解决element Upload 上传出现Access to XMLHttpRequest at
Access to XMLHttpRequest at 'http://192.168.12.119/api/design/upload_img' from origin 'http://localh ...
element upload组件 onError神坑记录
element upload组件的onError钩子函数返回错误是一个名为Error的对象但要拿到后台的detail报错必须这么写 const detail = JSON.parse(err.mes ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
element upload限制上传图片尺寸、大小、比例
// 上传前判断public async beforeUpload(file: any) {const is1M = file.size / 1024 / 1024 < 3; // 限制小于3M ...

Element Upload 上传图片

Element Upload 上传图片相关推荐

最新文章

热门文章