vue-upload-component 多文件上传，图片预览代码示例

好的，以下是一个基于vue-upload-component实现的多文件上传和图片预览的代码示例：

<template>
  <div>
    <vue-upload-component
      @upload-success="uploadSuccess"
      :multiple="true"
      :preview="true"
      accept="image/*"
    >
      <button>选择文件</button>
    </vue-upload-component>
    <div v-for="(file, index) in uploadedFiles" :key="index">
      <img :src="file.url" alt="preview image" />
      <p>{{ file.name }}</p>
    </div>
  </div>
</template>

<script>
import VueUploadComponent from "vue-upload-component";

export default {
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      uploadedFiles: [],
    };
  },
  methods: {
    uploadSuccess: function (file, response) {
      this.uploadedFiles.push({
        name: file.name,
        url: URL.createObjectURL(file.raw),
      });
    },
  },
};
</script>

在上述代码中，我们使用了vue-upload-component插件来实现文件上传和图片预览的功能。其中，我们设置了`multiple`属性为`true`，表示支持多文件上传；设置了`preview`属性为`true`，表示支持文件预览；设置了`accept`属性为`image/*`，表示仅支持上传图片文件。

在模板中，我们使用了`<vue-upload-component>`组件来渲染上传按钮，当用户选择文件后，该组件会触发`upload-success`事件，并将上传成功后的文件对象和响应数据作为参数传递给回调函数`uploadSuccess`。在该回调函数中，我们将上传成功的文件对象保存到`uploadedFiles`数组中，并使用`URL.createObjectURL`方法生成图片文件的预览URL。

最后，我们使用`v-for`指令遍历`uploadedFiles`数组，并使用`<img>`标签和`<p>`标签来展示每个文件的预览图和文件名。