vue 上传图片和文件集成

在 Vue 中上传图片和文件可以使用第三方组件库，如 element-ui 和 iview，也可以使用原生的 HTML5 文件上传功能。以下是使用 element-ui 的上传组件实现上传图片和文件的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :limit="3"
      :auto-upload="false"
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file) {
      console.log(response);
      console.log(file);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    }
  }
};
</script>

<style>
.upload-demo {
  display: inline-block;
  margin-right: 10px;
}
</style>

在这个示例中，我们使用了 element-ui 的上传组件，设置了上传地址、上传成功回调函数、上传前的处理函数、上传文件列表、上传文件数量限制、是否自动上传等属性。同时，我们还设置了上传文件的展示方式为图片卡片，并且限制了上传文件的类型和大小。

你可以根据自己的需求和使用的组件库进行相应的配置和实现。