vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数...

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

vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数..._第1张图片

推荐:《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 ‘]);

{}

{}

}

vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数..._第2张图片

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

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

如下:

vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数..._第3张图片

43be9931e8e354315911f50089bbd3cc.png

完美的

相关建议:

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

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

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

你可能感兴趣的:(vue上传文件到php)