vue 如何进行上传文件

在 Vue 中进行上传文件可以通过使用 `vue-upload-component` 这个组件来实现。首先需要安装该组件，使用以下命令：

npm install vue-upload-component --save

然后在需要使用上传组件的 Vue 组件中，使用以下代码进行引入：

import vueUploadComponent from 'vue-upload-component'

在模板中，你可以使用以下代码来渲染上传组件：

<vue-upload-component></vue-upload-component>

在上传组件中，你需要使用 `action` 属性指定上传文件的地址。例如：

<vue-upload-component action="/api/upload"></vue-upload-component>

同时，你还可以使用 `before-upload` 属性指定上传前的操作，例如限制上传文件的类型和大小：

<vue-upload-component
  action="/api/upload"
  :before-upload="beforeUpload"
></vue-upload-component>

methods: {
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      this.$message.error('上传文件只能是 JPG 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上传文件大小不能超过 2MB!')
    }

    return isJPG && isLt2M
  }
}

当上传完成后，你可以使用 `success` 属性来指定上传成功后的回调函数：

<vue-upload-component
  action="/api/upload"
  :before-upload="beforeUpload"
  :success="uploadSuccess"
></vue-upload-component>

methods: {
  uploadSuccess(response, file, fileList) {
    console.log(response)
    console.log(file)
    console.log(fileList)
  }
}

以上就是使用 `vue-upload-component` 进行上传文件的基本方法。