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.最后就是删除功能了，主要是配合后台传递当前要删除的数据给后台。谢谢你们，若有不足欢迎提出改进，你们一块儿探讨！