vue实现上传多张图片,并可预览,修改,删除,使用接口https://www.changxiang8.cn/test_api/test/aa/insert表示添加,https://www.changxiang8.cn/test_api/test/aa/delete表示删除,https://www.changxiang8.cn/test_api/test/aa/select表示选择,https://www.changxiang8.cn/test_api/test/aa/update表示更新
时间: 2023-08-18 16:10:29 浏览: 134
好的,这是一个比较常见的需求,可以使用Vue和Element UI来实现。首先需要在页面中引入Element UI的组件和样式。
接着,可以先创建一个上传图片的组件。在这个组件中,需要使用Element UI的Upload组件来实现上传图片的功能,并且可以使用Vue的v-for指令来循环显示已上传的图片,并提供修改和删除功能。
下面是一个简单的示例代码:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="https://www.changxiang8.cn/test_api/test/aa/insert"
:on-success="handleUploadSuccess"
:file-list="fileList"
:auto-upload="false"
list-type="picture-card"
:multiple="true"
:before-upload="beforeUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" style="width: 100%">
<div slot="footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="handleRemove">删 除</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
dialogVisible: false,
dialogImageUrl: "",
dialogIndex: 0,
};
},
methods: {
beforeUpload(file) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
if (!isJPG) {
this.$message.error("上传图片只能是 JPG/PNG 格式!");
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
return false;
}
},
handleUploadSuccess(response, file, fileList) {
this.fileList.push({
name: file.name,
url: response.url,
});
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.dialogIndex = this.fileList.indexOf(file);
},
handleRemove() {
// 删除图片
const file = this.fileList[this.dialogIndex];
const url = "https://www.changxiang8.cn/test_api/test/aa/delete";
// 调用删除接口
this.$http.post(url, { url: file.url }).then((res) => {
if (res.data.code === 0) {
this.fileList.splice(this.dialogIndex, 1);
this.dialogVisible = false;
} else {
this.$message.error("删除失败");
}
});
},
},
};
</script>
```
在这个组件中,我们使用了Element UI的Upload组件来实现上传图片的功能,并且使用了v-for指令来循环显示已上传的图片。同时,我们还使用了Element UI的Dialog组件来实现图片预览和删除功能。
当用户上传图片时,会调用handleUploadSuccess方法来将上传成功的图片添加到fileList中。当用户点击预览按钮时,会弹出一个Dialog来显示图片,并提供删除按钮来删除当前图片。当用户点击删除按钮时,会调用handleRemove方法来删除当前图片,并调用接口来删除服务器上的图片。
需要注意的是,这里的接口地址和请求方式需要根据实际情况进行修改。同时,在使用接口时需要注意安全性,防止接口被恶意调用。
阅读全文