vue element 多张图片上传,删除和展示图片
vue element 多张图片上传,删除和展示图片
·
功能点:点击‘发送’按钮,打开弹窗,点击‘点击上传’按钮,上传图片并展示出图片,点击删除按钮,删除点击的图片

<!-- 弹窗 -->
<el-dialog title="上传图片" :visible.sync="dialog.one" width="720px">
<el-form label-width="80px">
<h3 style="font-size: 15px; margin-bottom: 15px; font-weight: 400">上传血液报告图片</h3>
<el-form-item label="选择图片">
<el-upload
:headers="headers"
class="avatar-uploader"
action="/api/permission/file/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<font class="upload-text">只能上传jpg/png文件,且不超过10M,最多可以上传3张图片</font>
</el-form-item>
<el-form-item>
<ul class="img-list">
<li v-for="(item,index) in ossFileUploads" :key="index">
<img :src="item.filePath">
<i class="iconfont icon-shanchu" @click="handlerDel(item, index)"></i>
</li>
</ul>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handlerClose">取 消</el-button>
<el-button type="primary" @click="handlerSend">确 定</el-button>
</span>
</el-dialog>
data() {
return {
headers: {
Authorization: "Bearer " + localStorage.getItem("Authorization"),
},
tableItem: null,
ossFileUploads: [], //图片
dialog: {
one: false,
},
}
// 方法
// 上传图片验证
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
// 判断图片超过3张禁止再次上传
if (this.ossFileUploads.length === 3) {
this.$message.error('不能超过3张!');
return false
}
// 判断图片大小
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isLt2M;
},
// 上传血液报告图片回调
handleAvatarSuccess(res, file) {
// 状态 不等于200 停止往下执行
if (res.code !== 200) {
this.$message.error(res.msg);
return false;
}
// 图片上传成功,添加到图片数组中,进行渲染
this.ossFileUploads.push({
filePath: res.data,
type: "blood",
dataId: this.tableItem.id
})
},
// 删除图片
handlerDel(item,index){
// 图片大于1才能删除
if(this.ossFileUploads.length > 1){
this.ossFileUploads.splice(index,1)
this.$message.success('删除成功')
}else{
this.$message.error('保留最后一张')
}
},
// 查看
async getSendReportPop(row){
// 发送图片需要用到列表那一项数据
this.tableItem = row
// 打开弹窗
this.dialog.one = true
// 列表ID不存在清空图片数组,防止图片数据重复显示
if(!row.id){
this.ossFileUploads=[]
}else {
// 列表ID存在,请求接口,拿到图片数据,进行渲染
const res = await getScreeningFileLists(row.id, "blood")
if(res.code === 200){
this.ossFileUploads = res.data
}
}
},
// 发送图片
async handlerSend(){
// 发送图片,如果图片空,不往下执行
if(this.ossFileUploads.length === 0){
this.$message.error('至少上传一张')
return false
}
const params = {
bloodId : this.tableItem.id,
id : this.tableItem.id,
bookingId : this.tableItem.bookingId,
screenOrgId : this.tableItem.screenOrgId,
personId: this.tableItem.personId,
ossFileUploads: this.ossFileUploads,
}
// 发送图片接口
const res = await sendScreeningFiles(params);
if(res.code === 200){
this.$message.success('发送成功')
// 图片上传成功,调取列表接口,刷新页面
this.getTableList()
// 关闭弹窗
this.dialog.one = false
}
},
//取消
handlerClose(){
this.dialog.one = false;
this.ossFileUploads= [] //圖片路徑
}
更多推荐



所有评论(0)