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.最後就是刪除功能了，主要是配合後臺傳遞當前要刪除的數據給後臺。謝謝你們，若有不足歡迎提出改進，你們一塊兒探討！