使用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 = [];
},