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.最后就是刪除功能了，主要是配合后台傳遞當前要刪除的數據給后台。

謝謝大家，如有不足歡迎提出改進，大家一起探討！