vue-gallery + axios 上传图片，给每个图片添加进度条

问题描述

项目中使用vue-gallery 上传和管理图片，因为图片跟当前业务数据分开保存在不同的表中（因为是一对多，所以图片有一个单独的表），需要在业务数据保存成功后返回新增成功的业务id，根据返回的id再保存图片到表中，所以用到了axios进行异步调用。
由于图片大于10M后，上传速度慢下来，前端显示成功，但是点击编辑图片还没加载上。所以需要在前端显示进度。

1. 前端新增时对话框

上传图片时有单独的对话框上传，上传完成后，通过vue-gallery展示图片。

 <!-- 图片集合 -->
 <gallery :images="images" :index="index" @close="index = null" v-if="galleryRefresh"></gallery>

<!--新增-->
<el-dialog title="新增"  :visible.sync="addFormVisible2" width="35%"  :close-on-click-modal="false" ">
            <el-form  :model="addForm" label-width="90px" :rules="addFormRules" ref="addForm" >              
                <el-form-item prop="faultLocation" label="故障部位">
                        <span  v-if="!addForm.otherReportContent">
                             <el-select
                                     v-model="addForm.faultLocation"
                                     filterable
                                     remote
                                     reserve-keyword
                                     placeholder="输入部位名称过滤"
                                     :remote-method="handleFaultLocation"
                                     :loading="faultLocationLoading"
                                     class="xf-el-input"
                                     :disabled="true"
                             >
                            <el-option
                                    v-for="location in faultLocations"
                                    :key="location.id"
                                    :label="location.longName"
                                    :value="location.id">
                            </el-option>
                        </el-select>
                        </span>
                        <span v-else>
                            <el-select
                                    v-model="addForm.faultLocation"
                                    filterable
                                    remote
                                    reserve-keyword
                                    placeholder="输入部位名称过滤"
                                    :remote-method="handleFaultLocation"
                                    :loading="faultLocationLoading"
                                    class="xf-el-input"
                            >
                            <el-option
                                    v-for="location in faultLocations"
                                    :key="location.id"
                                    :label="location.longName"
                                    :value="location.id">
                            </el-option>
                        </el-select>
                        </span>
                </el-form-item>
                <el-form-item prop="reportContent" label="内容" >
                    <el-input v-model="addForm.reportContent"
                              placeholder="请输入内容"
                              class="xf-el-input" type="textarea" :autosize="{ minRows: 2, maxRows: 50 }" ></el-input>
                </el-form-item>                                       
                <el-form-item>
                    <el-button type="primary" icon="el-icon-upload2" @click="onUpload">上传图片或视频</el-button>
                </el-form-item>
                <el-form-item>
                    <div style="width: 100%">
                        <div
                                class="image"
                                v-for="(image, imageIndex) in images"
                                :key="imageIndex"
                                @click="index = imageIndex"
                                :style="{ backgroundImage: 'url(' + image.thumbnail + ')', width: '100px', height: '100px' }"
                        >
                            <el-button icon="el-icon-delete" type="danger" size="small" style="margin:2px;padding:5px;" @click.stop="onDeleteFile(image)"></el-button>
                            <div class="review" v-if="addLoading">
                                <div class="progress">
                                    <div class="progress-done" :style="{width: progress + '%'}"></div>
                                </div>
                                <span style="width: 50px;">{{ progress }}%</span>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button @click.native="addFormVisible2 = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

图片：

上传图片或视频：

点击提交：

2.新增保存方法，axios同步进度

//新增添加 
     addSubmit(id,para){
        addTool(id,para).then(
               (res) => {
                    if (this.fileList.length > 0){
                            this.progress = 0;
                            let toolId= res.body;//返回的业务id
                            let url = Utils.uriToUrl('/tool-service/tool/upload_images/' + toolId);
                            let formData = new FormData();
                            this.fileList.forEach(item=>{
                                formData.append('file',item.raw,item.name);
                            });
                            axios({
                                url,
                                method: 'post',
                                data: formData,
                                headers: {
                                    'Authorization': "Bearer " + sessionStorage.getItem("token")
                                },
                                //原生获取上传进度的事件
                                onUploadProgress: progressEvent => {
                                    let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
                                    this.progress = process;
                                }
                            }).then(res => {
                                if (this.progress >= 100) {
                                    this.clearAddSub();
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }else {
                            this.clearAddSub();
                        }
                    },
                    (res) => {
                        this.addLoading = false;
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                        this.$refs['addForm'].resetFields();
                    }
                );
            },

            clearAddSub(){
                this.addLoading = false;
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                this.progress = 0;
                this.fileList = [];
                this.images = [];             
            },

3.涉及到的css

其中 font-set是放在 div class=“container” style=“height:95%;display:flex;flex-direction: column;” id=“font-set” 上

    #font-set >>> .image {
        float: left;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        /*border: 1px solid gray;*/
        margin: 15px 5px 10px 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    }
    #repairImgGal >>> .image:hover {
        cursor: pointer;
    }
    /deep/ .el-upload--picture-card{
        width: 80px;
        height: 35px;
    }
    /deep/ .el-upload{
        width: 80px;
        height: 35px;
        line-height: 35px;
        border: none;
    }
    /deep/ .el-upload-list--picture-card .el-upload-list__item{
        width: 80px;
        height: 35px;
        line-height: 35px;
    }
    /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 80px;
        height: 35px;
        line-height: 35px;
    }
    /deep/ .avatar{
        width: 80px;
        height: 35px;
    }
    .review {
        transform: translateY(60px);
        border: 1px solid transparent;
        border-radius: 5px;
        color: #777;
        display: flex;
        font-size: 12px;
        align-items: center;
        margin: 5px 5px 0 0;
    }
    .progress {
           background-color: rgba(100, 100, 100, 0.2);
           border-radius: 5px;
           position: relative;
           margin: 0 5px;
           height: 10px;
           width: 80px;
    }
    .progress-done {
        background: linear-gradient(to left, #67C23A, #67C23A);
        box-shadow: 0 3px 3px -5px #67C23A, 0 2px 5px #67C23A;
        border-radius: 5px;
        height: 10px;
        width: 0;
        transition: width  ease 0.1s;
    }