Vue前端实现文件上传的完整例子

一、添加依赖

在使用Vue前端实现文件上传前，我们需要添加一个Vue文件上传组件，这里我们使用的是vue-upload-component。我们可以通过命令行在项目目录下使用npm下载这个组件：

npm install vue-upload-component --save

二、引入Vue文件上传组件

我们需要在Vue组件中引入vue-upload-component，然后在template中使用它。这里我们将它添加到一个单独的文件中:

//引入vue-upload-component
import { UploadComponent } from 'vue-upload-component'

export default {
  components: {
    'file-upload': UploadComponent
  },
  data () {
    return {
      files: []
    }
  },
  methods: {
    uploadStarted (file) {
      console.log(file)
    },
    fileUploaded (response) {
      console.log(response)
    },
    uploadAborted (file) {
      console.log(file)
    },
    uploadProgress (event) {
      console.log(event)
    }
  }
}

然后在template中使用：

三、添加方法处理上传文件

在Vue组件中，我们需要添加一些函数来处理上传文件。这些函数将在上传组件触发事件时被调用。我们可以在先前的Vue组件中添加这些函数。

export default {
  components: {
    'file-upload': UploadComponent
  },
  data () {
    return {
      files: []
    }
  },
  methods: {
    uploadStarted (file) {
      console.log(file)
    },
    fileUploaded (response) {
      console.log(response)
    },
    uploadAborted (file) {
      console.log(file)
    },
    uploadProgress (event) {
      console.log(event)
    },
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 文件上传前的过滤处理，可以判断文件格式、大小等
        if (/\.(gif|jpg|jpeg|png)$/i.test(newFile.name)) {
          prevent()
        }
      }
    }
  }
}

四、运行Vue文件上传组件

最后，我们需要运行Vue文件上传组件。我们可以在先前的组件中添加uploadUrl属性，然后使用它来指定文件上传的URL。

import { UploadComponent } from 'vue-upload-component'

export default {
  components: {
    'file-upload': UploadComponent
  },
  data () {
    return {
      files: []
    }
  },
  methods: {
    uploadStarted (file) {
      console.log(file)
    },
    fileUploaded (response) {
      console.log(response)
    },
    uploadAborted (file) {
      console.log(file)
    },
    uploadProgress (event) {
      console.log(event)
    },
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        if (/\.(gif|jpg|jpeg|png)$/i.test(newFile.name)) {
          prevent()
        }
      }
    }
  },
  computed: {
    uploadUrl () {
      return 'http://localhost:3000/upload'
    }
  }
}

完成上述步骤后，我们可以构建和运行Vue应用程序，然后测试我们的Vue前端文件上传。当我们选择一个文件并上传时，Vue-upload-component将发送一个POST请求到指定的URL。服务器将处理上传文件，然后返回响应代码和响应数据，以便我们可以在Vue组件中处理它们。