vue 上传附件

<template>
  <div>
    <form action="/file/upload" method="post" enctype="multipart/form-data">
      <label for="file">文件名：</label>
      <input type="file" name="up_file" @change="getFile($event)" />
      <br />
      <input type="submit" name="submit" value="上传文件" />
    </form>
  </div>
</template>

<script>
// import http from '@/assets/http.js'
export default {
  name: 'Home',
  data () {
    return {
      file: ''
    }
  },
  methods: {
    getFile (event) {
      this.file = event.target.files[0]
      console.log(this.file)
    }
  }
}
</script>

<style scoped>
</style>

后端：

        //        if (file_exists("/User/xx/" . $_FILES["file"]["name"])) {
        //            echo " 文件已经存在。 ";
        //        } else {
        //            move_uploaded_file($_FILES["up_file"]["tmp_name"], "/home/homework/xiaoxiao/" . $_FILES["up_file"]["name"]);
        //            echo "文件存储在: " . "/home/homework/xx/" . $_FILES["up_file"]["name"];
        //        }

        $allowed = array("gif", "jpeg", "jpg", "png");

        $temp      = explode(".", $_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["name"]);
        $extension = end($temp);        // 获取文件后缀名
        if ((($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/gif")
                || ($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/jpeg")
                || ($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/jpg")
                || ($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/pjpeg")
                || ($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/x-png")
                || ($_FILES[Service_Page_File_UploadToCos::UPLOAD_FILE_ID]["type"] == "image/png"))
            && in_array($extension, $allowed)) {

            $uploadObj = new Service_Upload();
            $arrOutput = $uploadObj->execute();

        } else {
            throw new Exception(
                ExceptionCodes::PARAM_ERROR,
                "只能上传图片");
        }

最后

以上就是开心寒风最近收集整理的关于vue 上传附件的全部内容，更多相关vue内容请搜索靠谱客的其他文章。