vue 实现上传功能

要实现上传功能，可以使用 Vue.js 结合 FormData 和 axios 库来实现。以下是一个基本的上传文件的示例代码：

HTML 代码：

<template>
  <div>
    <input type="file" ref="file" @change="handleFileChange">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

Vue.js 代码：

<script>
import axios from 'axios'

export default {
  data () {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange (e) {
      this.file = e.target.files[0]
    },
    uploadFile () {
      let formData = new FormData()
      formData.append('file', this.file)
      axios.post('/api/upload', formData)
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在上面的代码中，我们使用了 `axios` 库发送了一个 POST 请求，将文件数据通过 FormData 格式发送到后端。在 `handleFileChange` 方法中，我们使用 `refs` 获取到了文件输入框的 DOM 元素，并将选择的文件保存到组件数据中。在 `uploadFile` 方法中，我们创建了一个 FormData 对象，并将文件数据添加到其中，然后通过 axios 发送 POST 请求，将数据发送到后端的 `/api/upload` 接口。

需要注意的是，为了安全起见，我们需要在后端对上传的文件进行校验和过滤，以避免上传恶意文件或者非法文件。