vue-simple-uploader数据回显

vue-simple-uploader 是一个用于 Vue.js 的简单上传组件，如果需要实现数据回显，可以将已上传的文件的 URL 存储在数据库中，并在需要回显的页面中将 URL 传递给 vue-simple-uploader 组件的 props 中。

具体实现方法如下：

1. 在上传文件时，将文件上传至服务器，并将文件的 URL 存储在数据库中。

2. 在需要回显的页面中，从数据库中获取已上传文件的 URL，并将其传递给 vue-simple-uploader 组件的 props 中。

例如，假设我们已经将一个名为 file.jpg 的文件上传至服务器，并将其 URL 存储在数据库中。现在需要在页面中将该文件回显出来，可以按照以下步骤进行：

1. 在页面中引入 vue-simple-uploader 组件，并定义一个 data 属性，用于存储已上传文件的 URL。

<template>
  <div>
    <vue-simple-uploader
      ref="uploader"
      :uploadUrl="uploadUrl"
      :headers="headers"
      :autoUpload="false"
      :showUploadBtn="false"
      :showCancelButton="false"
      :fileSizeLimit="fileSizeLimit"
      @beforeUpload="beforeUpload"
      @fileAdded="fileAdded"
    />
    <div>
      <img :src="imageUrl" />
    </div>
  </div>
</template>

<script>
import VueSimpleUploader from "vue-simple-uploader";

export default {
  components: {
    VueSimpleUploader,
  },
  data() {
    return {
      imageUrl: "", // 存储已上传文件的 URL
      uploadUrl: "/api/upload",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      fileSizeLimit: 10 * 1024 * 1024, // 限制文件大小为 10MB
    };
  },
  methods: {
    beforeUpload() {
      // ...
    },
    fileAdded() {
      // ...
    },
  },
};
</script>

2. 从数据库中获取已上传文件的 URL，并将其赋值给 imageUrl 属性。

import axios from "axios";

export default {
  data() {
    return {
      imageUrl: "", // 存储已上传文件的 URL
      // ...
    };
  },
  mounted() {
    // 从数据库中获取已上传文件的 URL
    axios
      .get("/api/getImageUrl")
      .then((response) => {
        if (response.data.success) {
          this.imageUrl = response.data.imageUrl;
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  // ...
};

3. 在页面中使用 imageUrl 属性来显示已上传文件的内容。

<div>
  <img :src="imageUrl" />
</div>

这样就可以实现 vue-simple-uploader 的数据回显了。