vue upload上传图片

前几天做到一个关于图片上传功能，图片编辑和删除功能，和大家分享一下，

在vue的基础上引入element-ui，利用element中的upload的上传功能。

代码

<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> // 提交的服务器

编辑图片的时候需要将后台的返回给你的数据通过拼接的形式显示在页面上
更多功能在官网

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;
})

这样就可以编辑显示的图片了
最后就是删除功能了，主要是配合后台传递当前要删除的数据给后台。
本文是转载
源地址