vue+axios+php如何实现上传文件功能？Vue Axios PHP如何实现上传文件的功能？，

推荐：《PHP视频教程》

当我们提交表单时，我们经常会遇到一些表单提交要求。vue的axios和上传的文件碰撞后会有什么不一样的火花吗？让我一起来吧：

首先我们需要提交一个写axios的表单，因为我用的是webpack，所以代码：

模板lang=’pug ‘

p

输入(type=’file ‘，ref=’yin ‘)

点击按钮(@click=’submit()’)上传

/模板

脚本

导出默认值{

methods: {

submit(){

让FormData=new FormData()；

formdata.append(‘file ‘，此。$ refs . yin . files[0])；

这个。$axios({

URL : ‘ http://localhost/PHP/file _ upload/file _ updata . PHP ‘，

方法： ‘发布’，

data: formdata，

})。然后((res)={

console.log(res.data)

})

{}

{}

{}

/script用的是pug模板，也可以改成HTML，无害。它主要依赖于js逻辑代码。首先，声明一个FormData对象，然后在post中传递该值。此时，url是WAP中的一个PHP文件。文件如下：

？php

/**

*由PhpStorm创建。

*用户：戴尔

*日期： 2017/11/23

*时间： 10:57

*/

标题(‘访问控制-允许-原始： * ‘)；

//响应类型

标题(‘访问控制-允许-方法：发布’)；

//响应头设置

标头(‘访问控制-允许-标头： x-请求-带有，内容类型’)；

标题(‘内容类型：文本/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 ‘；

回声’文件大小：’。($file[‘size’]/1024)。k/br ‘；

回应文件的临时存储位置：“”。$file[‘tmp_name’]。/br ‘；

//保存上传的文件

if (file_exists(‘upload ‘)。$file[‘name’])) {

Echo $文件[‘name’]。文件已经存在”；

} else {

//如果目录不存在，上传文件

if(move _ uploaded _ file($ file[‘ tmp _ name ‘]，$name)) {

move _ uploaded _ file($ file[‘ tmp _ name ‘]，’ upload/’。$ file[‘ name ‘])；

{}

{}

}

一定要看清楚结构，否则上传的文件无法保存。

PHP中的头信息解决了跨域问题，utf-8转码解决了代码乱码问题，然后将得到的文件放入上传文件夹；

如下：

完美的

相关建议：

2020年前端vue面试问题总结(附答案)

VUE教程：推荐2020年来自最新的视频由教程挑选

关于编程的更多知识，请访问：编程教学！vue axios php就是这么上传文件的。更多详情，请关注Lei.com其他关于php知识的相关文章！