추천: "PHP 비디오 튜토리얼"
양식 제출을 할 때 종종 몇 가지 양식 제출 요구 사항이 발생하며 Vue의 axios와 업로드된 파일이 충돌한 후에도 다른 스파크가 발생하지 않습니다. 하나씩 들어보세요:
우선 vue axios 양식 제출을 작성해야 합니다. 저는 webpack을 사용하므로 코드는 다음과 같습니다.
<template lang="pug"> p input(type="file", ref="yin") button(@click="submit()") 点击上传 </template> <script> export default{ methods: { submit(){ let formdata = new FormData(); formdata.append('file', this.$refs.yin.files[0]); this.$axios({ url: 'http://localhost/php/file_upload/file_updata.php', method: 'post', data: formdata, }).then((res) => { console.log(res.data) }) } } } </script>
pug 템플릿을 사용하거나 HTML로 변경할 수 있습니다. 네, 무해합니다. . 주로 js 로직 코드에 따라 다릅니다. 먼저 FormData 개체를 선언한 다음 post에 값을 전달합니다. 이때 파일은 다음과 같습니다.
<?php /** * Created by PhpStorm. * User: DELL * Date: 2017/11/23 * Time: 10:57 */ header("Access-Control-Allow-Origin:*"); // 响应类型 header('Access-Control-Allow-Methods:POST'); // 响应头设置 header('Access-Control-Allow-Headers:x-requested-with, content-type'); header("Content-type: text/html; charset=utf-8"); $file = $_FILES["file"]; if ($file["error"] > 0) { echo "错误:" . $file["error"]; } else { $name = iconv('utf-8', 'gb2312', "upload/" . $file["name"]); echo "文件名称:" . $file["name"] . "</br>"; echo "文件类型:" . $file["type"] . "</br>"; echo "文件大小:" . ($file["size"] / 1024) . "K</br>"; echo "文件临时存储的位置:" . $file["tmp_name"] . "</br>"; //保存上传的文件 if (file_exists("upload" . $file["name"])) { echo $file["name"] . "文件已经存在"; } else { //如果目录不存在则将该文件上传 if (move_uploaded_file($file['tmp_name'], $name)) { move_uploaded_file($file['tmp_name'], "upload/" . $file["name"]); } } }
구조를 명확히 하세요. 그렇지 않으면 업로드된 파일을 저장할 수 없습니다.
PHP의 헤더 정보는 도메인 간 문제를 해결하고 utf-8 트랜스코딩은 왜곡된 문제를 해결한 다음 얻은 파일을 업로드에 넣습니다. 폴더;
는 다음과 같습니다:
Perfect
관련 추천:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !
위 내용은 vue+axios+php는 파일 업로드 기능을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!