vue.js php 上传图片,如何使用Vue.js和PHP上传文件

文件上传是web应用程序的基本要求之一。

使用Axios包发送AJAX请求来上传文件，使用FormData对象发送选定文件。

在本教程中，我将展示如何使用Vue.js和PHP上传文件。

1.下载&包括从Axios下载GitHub软件包，或者你也可以使用CDN (https://unpkg.com/axios/dist/axios.min.js)，

现在，在

节中包含vue.js的axios.min.js，

2. HTML

在

中创建文件元素和按钮。

在file元素中添加了ref='file'，用于获取Vue脚本中的选定文件。

在调用@click方法的按钮上添加事件。

完整的代码

Upload file

3. PHP

创建用于存储文件的ajaxfile.php文件和uploads目录。

在$valid_extensions数组中分配有效的文件扩展名，并从文件中获取文件扩展名。

如果在$valid_extension数组中找到文件扩展名，则上传文件，并返回1否则返回0。

完整的代码<?php

// File name

$filename = $_FILES['file']['name'];

// Valid file extensions

$valid_extensions = array("jpg","jpeg","png","pdf");

// File extension

$extension = pathinfo($filename, PATHINFO_EXTENSION);

// Check extension

if(in_array(strtolower($extension),$valid_extensions) ) {

// Upload file

if(move_uploaded_file($_FILES['file']['tmp_name'],"uploads/".$filename)){

echo 1;

}else{

echo 0;

}

}else{

echo 0;

}

exit;

4.脚本

在#myapp上初始化Vue。

添加file data变量，并定义uploadFile()方法，这个方法在上传按钮上被调用单击。

选择文件，并在FormData对象中追加。

向ajaxfile.php发送POST请求并将FormData作为数据传递。

另外，设置Content-Type: 'multipart/form-data' 在header中。

成功回调时如果response.data为0，则alert('File not uploaded.')否则，alert('File uploaded successfully.') 。

完整的代码var app = new Vue({

el: '#myapp',

data: {

file:"",

},

methods: {

uploadFile: function(){

this.file = this.$refs.file.files[0];

let formData = new FormData();

formData.append('file', this.file);

axios.post('ajaxfile.php', formData,

{

headers: {

'Content-Type': 'multipart/form-data'

}

})

.then(function (response) {

if(!response.data){

alert('File not uploaded.');

}else{

alert('File uploaded successfully.');

}

})

.catch(function (error) {

console.log(error);

});

}

}

})