如何使用 axios 将图像从 VueJS 上传到 phpMyAdmin？答案

【问题标题】：How to upload image from VueJS to phpMyAdmin with axios?如何使用 axios 将图像从 VueJS 上传到 phpMyAdmin？
【发布时间】：2021-01-08 04:36:00
【问题描述】：

在我的 owner.vue 中，管理员可以将所有者添加到名为“所有者”的表中。目前，所有者的姓名可以成功添加到数据库中，而它的图像列是空的。我想让管理员能够将图像连同所有者的姓名一起添加到其中。

Owner.vue

//模板

<v-text-field v-model="ob_person_name" label="Owner name" outlined required></v-text-field>
<input type="file" ref="ob_personal_document">                    
<v-btn text @click="createContact()">Confirm</v-btn>

//脚本

<script>
    export default {    
       data: function () {
           return{
              ob_person_name:'',
              ob_acc_type:""
           }
       },
       methods: {
           createContact: function(){
              if(this.$refs.form.validate()){
                   this.ob_personal_document = this.$refs.ob_personal_document.files[0];
                   let formData = new FormData();
                   formData.append('ob_person_name', this.ob_person_name)
                   formData.append('ob_personal_document', this.ob_personal_document);

            var owner = {};
                 formData.forEach(function(value, key){
                 owner[key] = value;
            });

              this.axios({ 
                   method: 'post',
                   url: 'http://www.example.com/process.php?action=create',
                   data: formData,
                   config: { 
                       headers: {
                         'Content-Type': 
                         'multipart/form-data' 
                       }}
                   }).then(function (response) {
                       console.log(response)
                       this.newOwner.push(owner)
                   }).catch((error) => {
                       console.warn(error.message);
                   }) 
              }

     } 
</script>

process.php

<?php
$host = '111.22.222.111';
$dbname = 'test';
$username = 'username';
$password = "password";

$conn = mysqli_connect($host, $username, $password,$dbname);

// Check connection
    if (!$conn) {
        die("Connection failed!" .mysqli_connect_error());
    }

    $result = array('error'=>false);
    $action = '';

    if(isset($_GET['action'])){
        $action = $_GET['action'];
    }

    if($action == 'read'){
        $sql = $conn->query("SELECT * FROM owners");
        $owners = array();
        while($row = $sql->fetch_assoc()){
            array_push($owners, $row);
        }
        $result['owners'] = $owners;
    }

    if($action == 'create'){
          $ob_person_name= $_POST['ob_person_name'];
          $ob_personal_document = $_FILES['ob_personal_document'];

    $sql = $conn->query("INSERT INTO owners (ob_person_name, ob_personal_document)
    VALUES('$ob_person_name', '$ob_personal_document')");

    if($sql){
         $result['message'] = "Owner added successfully!";
    }
    else {
         $result['error'] = true;
         $result['message'] = "Failed to add owner";
    }
  }

phpMyAdmin 中的图像结果显示为“Array”，如下图所示。

the outcome of the ob_personal_document

【问题讨论】：

#phmadmin 是 mysql 客户端。图像可以保存在数据库中。你需要研究。 - 通过在 vue js 和 axios 中进行更改来上传您的图像 - 创建一个路由控制器或 url 位置，您可以在其中发布您的图像 - 制作合适的控制器来获取该图像数据。图像数据将保存在文件中，并将其引用保存在数据库表中 - 将其保存在数据库中或图像文件的引用中。
phpMyAdmin 是用 PHP 编写的 MySQL 管理工具，它本身不是数据库。您可能正在使用 MySQL 或 MariaDB 作为数据库。
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!
谢谢！但是我已经想出了如何将图像传递到数据库，然后匹配数据库中图像的名称和 phpMyAdmin 图像列中的图像名称。谢谢大家！

标签： php image vue.js axios

【解决方案1】：

我已经通过将图像发布到服务器的数据库并创建文件夹目录并创建另一个 file.php 解决了这个问题

file.php

<?php
$ob_personal_document = $_FILES['ob_personal_document']['name'];
$valid_extensions = array("jpg","jpeg","png","pdf");
$extension = pathinfo($ob_personal_document, PATHINFO_EXTENSION);
if(in_array(strtolower($extension),$valid_extensions) ) {
   if(move_uploaded_file($_FILES['ob_personal_document']['tmp_name'], "uploads/".$ob_personal_document)){
      echo 1;
   }else{
      echo 0;
   }
}else{
   echo 0;
}
exit;

owner.vue

//模板

<input type="file" id="ob_personal_document" ref="ob_personal_document" />
<button type="button" @click='uploadFile()' >Upload file</button>

//在createContact之后添加另一个函数

uploadFile: function(){
       this.ob_personal_document = this.$refs.ob_personal_document.files[0];

       let formData = new FormData();
       formData.append('ob_personal_document', this.ob_personal_document);

       this.axios.post('file.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);
       });

     },

在这种情况下，我还在 phpMyAdmin 列中添加了“图像”的名称，以获取与存储中图像名称相同的图像。

【讨论】：