vue批量上传图片并编辑图片名称

在写一个批量上传图片的功能

直接看代码吧，

 <el-upload class="avatar-uploader"  multiple :action="上传接口" :headers="请求头，可根据自己情况配置" :show-file-list="false" :on-success="handleAvatarSuccess">
         <el-button style="margin:20px 0 20px -70px; " slot="trigger" size="small" type="primary">点击上传图片</el-button>
 </el-upload>
 <el-table v-loading="loading" class='courselist' :data="uploadList">
        <el-table-column label="文件名称" align='center'>
				<template slot-scope="scope">
					<p>{{scope.row.name}}</p>
				</template>
		</el-table-column>
        <el-table-column label="图片名称" align='center'>
				<template slot-scope="scope">
                      <el-input v-model="scope.row.user_name"  @input="onExchange(scope.$index)" placeholder="请输入图片名称"></el-input>
				</template>
		</el-table-column>
        <el-table-column label="图片" align='center'>
			    <template slot-scope="scope">
					<img style="width:50px;" v-if='scope.row.response.data.path' :src="imgUrl+scope.row.response.data.path" alt="">
                        <p v-else>暂无</p>
				</template>
		</el-table-column> 
        <el-table-column label="操作" align='center'>
				<template slot-scope="scope">
                      <el-button class='butclass' type="text" @click="handledel(scope.$index)">删除</el-button>
                </template>
         </el-table-column>
         <template slot="empty">
				<img class="emptyshare" src="@/assets/cdyImg/message/blankDrawing.png" alt="">
				<p class="textshare">没有找到相关信息~</p>
		</template>
</el-table>
 <div class="pageshare">
		<el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
			 layout="total, prev, pager, next, jumper" :total="total">
		 </el-pagination>
 </div>

multiple　是多选

uploadList是当页数据，filelist全部数据

下边是逻辑代码

 handleCurrentChange(val) {
                this.page = val;
                this.pageList();
 },
 pageList(){
      this.uploadList = this.filelist.filter(
          (item, index) =>
                  index < this.page * this.limit &&
                  index >= this.limit * (this.page - 1)
         );
          this.total=this.filelist.length
 },
 handledel(index){
         this.filelist.splice((this.page-1)*this.limit+index.$index,1)
         this.pageList()
  },
 handleAvatarSuccess(res,file,filelist){
　　　　　　　　　　//filelist是文件上传成功后的所有信息
                this.total=filelist.length
                this.filelist=filelist
                this.uploadList=filelist
                this.filelist.forEach(val => {
                    let name=''
                    name=val.name.split('.')[0]
                    val.user_name= JSON.parse(JSON.stringify(name))
                });
                this.pageList()
                this.loading=false;
},
onExchange(index){
       let moment = this.uploadList[index]; // 此处的tableData为自己的table表格绑定的data数组
       this.$set(this.uploadList, index, moment);
}

　　以上，就是图片批量上传，并可以编辑图片名称的全部了，如有更好的方法，欢迎指教