由于无法直接使用element自带的upload直接实现图片重命名的功能，所以做了一部分改变。

1、获取图片的数据源，用table来接收

2、在table内实现行编辑，来实现重命名的目的

<el-upload
  class="upload-demo"
  action="自己的接口地址"
  :on-change="handleChange"
  :file-list="fileList" :show-file-list="false">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>


<el-table :data="fileList" :show-header="false" :size="mini"  class="sWidth">
  <el-table-column prop="id" />
  <el-table-column prop="name">
    <template slot-scope="scope">
      <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.name"></el-input>
      <span v-else>{{scope.row.name}}</span>
    </template>
  </el-table-column>

  <el-table-column prop=""  align="left" width="100">
    <template slot-scope="scope">
      <el-button v-if="userId===scope.row.id" size="medium" type="text"  icon="el-icon-check"  @click="saveUser(scope.row)">保存</el-button>
      <el-button v-else icon="el-icon-edit"  type="text"  size="medium" @click="editUser(scope.row.id)">重命名</el-button>
    </template>
  </el-table-column>
</el-table>

声明变量：fileList，获取数据源

// 重命名图片
editUser (id) {
  this.userId = id
},

// 保存编辑后的图片
saveUser (user) {
  // 模拟删除
  // this.list = this.list.filter(val => !(user.id).includes(val.id))
  // 保存
  // this.list.push(user)
  this.userId = ''
},

// 上传后获取上传内容
handleChange(file, fileList) {
  this.fileList = fileList.slice(-3);
  console.log(file);
  console.log(fileList);
},