Vue项目中实现点击按钮弹出对话框上传文件
以轮播图图片更改为例
html
<template>
<div style="width: 100%">
<el-table :data="imageArr" style="margin: 0 auto " >
<el-table-column align="center" type="index" label="轮播图编号" style="text-align: center" width="200px"></el-table-column>
<el-table-column align="center" label="图片">
<template slot-scope="scope">
<img :src="BASE_URL+scope.row.imgUrl" width="500px" height="250px">
</template>
</el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间" style="text-align: center"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
<el-button type="danger" size="small" @click="update(scope.row.id)">更改</el-button>
</template>
</el-table-column>
</el-table>
<!--图片上传弹出框 -->
<el-dialog
title="更改轮播图"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-upload
:action="this.BASE_URL+'/v1/uploadBanner'"
list-type="picture-card"
:on-remove="handleRemove"
:on-success="handlerSuccess">
<i class="el-icon-plus"></i>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
js
export default {
data() {
return {
dialogVisible:false,
imageArr:[],
banner:{}
}
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
selectAllPicture() {
let url=this.BASE_URL+'/v1/banners/selectAll'
this.axios.get(url).then(res=>{
if (res.data.code==1){
this.imageArr=res.data.data
console.log(this.imageArr)
}else {
this.$message.error(res.data.msg)
}
})
},
//删除图片
handleDelete(row){
let id=row.id
let url=this.BASE_URL+'/v1/banners/delete/?id='+id
this.axios.delete(url).then(
res=>{
if (res.data.code==1){
this.$message.success("删除成功")
//刷新
location.reload()
}else {
this.$message.error("删除失败")
}
}
)
},
update(id){
this.banner.id=id;
this.dialogVisible = true
},
//处理服务器中的图片
handleRemove(file) {
//console.log(file);
this.axios.post(this.BASE_URL+'/v1/remove?url='+file.response.data)
.then(res=>{
if(res.data.code == 1){
this.$message.success("删除服务的图片成功!!")
}else{
this.$message.error(res.data.msg)
}
})
},
//将需要上传的图片的位置给内容的图片的位置 保存到数据库
handlerSuccess(response,file,fileList){
console.log(file)
// 如果路径中包含图片
if(file.raw.type.includes('image')){
this.banner.imgUrl = response.data;
let url=this.BASE_URL+"/v1/banners/update"
this.axios.put(url,this.qs.stringify(this.banner)).then(res=>{
if(res.data.code==1){
this.$message.success("修改成功")
location.reload()
}
})
}else {
this.c.videoUrl=response.data
}
},
},
mounted() {
this.selectAllPicture()
},
}