vue+element做图片的上传功能（一）

前几天做到一个关于图片上传功能，图片编辑和删除功能，和大家分享一下，写的不好欢迎大家吐槽！

1.在vue的基础上安装element-ui，利用element中的upload的上传功能，我是使用这种照片墙的功能：

2.废话不多说，直接上代码：

<el-upload class="upload-demo"
        action="上传的地址"
        list-type="picture-card"
        :limit='5'  // 上传图片的个数
        :auto-upload="false"
        :on-exceed='uploadOverrun'  // 判断上传的个数
        :on-preview="handleContImgPreview"   // 点击文件列表中已上传的文件时的钩子
        :on-remove='handleRmove' // 文件列表移除文件时的钩子
        :http-request='submitUpload' // 上传时的请求的接口
        :file-list="fileList"
        ref="upload"
>
    <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-button @click='submitAssess'>提交到服务器</el-button> // 提交的服务器

有其他的需求，请查看：https://element.eleme.io/#/zh-CN/component/upload#upload-shang-chuan

3.编辑图片的时候需要将后台的返回给你的数据通过拼接的形式显示在页面上

this.dialogImageUrl = []; // 存放图片路径的数组
this.fileName = '';
this.a.img.forEach((item) => { // this.a是后台编辑时返回给你的数据
    this.dialogImageUrl.push('地址' + item.'后台返回的地址');
    this.fileName += item.'后台返回的地址'+ ','; // 由于返回的是多个图片，所以要拼接起来

})
var imgList = [];
for (var i = 0; i < this.dialogImageUrl.length; i++) {
    imgList.push(this.dialogImageUrl[i]);
}
this.fileList = imgList.map((ele) => { // 最后将数据给fileLis

    let item = {};
    item.url = ele;
    return item;
})

这样就可以编辑显示的图片了

4.最后就是删除功能了，主要是配合后台传递当前要删除的数据给后台。

谢谢大家，如有不足欢迎提出改进，大家一起探讨！