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 上传图片组件使用的过程详解，希望能帮助到你。

欢迎大家提出问题！