在写一个批量上传图片的功能
直接看代码吧,
<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);
}
以上,就是图片批量上传,并可以编辑图片名称的全部了,如有更好的方法,欢迎指教