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表示更新

好的，与之前的问题类似，我们也可以使用Vue和Element UI来实现图片上传预览功能。

首先需要在页面中引入Element UI的组件和样式。然后，可以创建一个上传图片的组件，使用Element UI的Upload组件来实现上传图片的功能，并使用Vue的v-for指令来循环显示已上传的图片，并提供删除功能。

下面是一个简单的示例代码：

<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方法来删除当前图片，并调用接口来删除服务器上的图片。

需要注意的是，这里的接口地址和请求方式需要根据实际情况进行修改。同时，在使用接口时需要注意安全性，防止接口被恶意调用。