HTML5 Formdata完成图片上传 【关键词vue+php+ajax】 重点在于智商的重要性【记录一次智商欠费

image.png

文不对题：
今天在深圳天安云谷目睹了一场华为
emmmmm 事实上我也不知道他们在干嘛，反正我看他们玩的挺开心的
助理超级好看23333，再次为华为的助理模式点赞。

首先说明情况我是用的是 vue + 后端php CI框架 + Ajax

【正经】
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。它有一些有趣的特性，比如 Formdata 。 Formdata是XMLHttpRequest 的一个对象利用它我们可以实现提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。这篇 emmmm 其实主要是用来给各位找回自信，下面我将讲一讲我是如何智商欠费的

• 首先看一下formData的基本用法：FormData对象
  FormData对象可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

var form = document.getElementById("form1");
var fd = new FormData(form);

• 下面是HTML结构

        

            
当前头像
            

                
            
        
        

            
  
                
                
提交
            

        

此时显示为

image.png

*下面是点击事件触发的函数

                 gogogo:function(){
                    var form=document.getElementById("form1");
                    var fd =new FormData(form);//新建FormData对象，并把form表单的数据作为参数
                    $.ajax({
                         url: "http://127.0.0.1/bishegogogo/CI/img/test", //注意此处我使用了PHP CI框架 。项目名bishegogogo，img为CI框架下的控制器，test为控制器下的方法
                         type: "POST", //提交方式 我使用 post提交
                         data: fd, //传输数据
                         processData: false,  // 告诉jQuery不要去处理发送的数据
                         contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                         success: function(response,status,xhr);
                            var json=$.parseJSON(response);
                            var imgsrc = 'http://127.0.0.1/img/TX/' + json['photo'];//这里请注意引用
                            $("img").attr("src",imgsrc);//jquery更新 imgsrc
                         }
                    });
                    return false;
                }

第一个智商税
再此说明一下，这里是我今天交的第一个智商税
我的思路是后端PHP接到数据后直接完成字符串拼接，返回一个完整的路径也就是
http://127.0.0.1/img/TX/xxxxxx.jpg
然后改一下src 岂不是美滋滋？？燃鹅！！！VUE会在链接前加上http://localhost:8080
然后就是一个凉凉夜色为你。。。。没解决，于是选择返回文件名，由前台完成字符串拼接来避免这个问题

回到正题

此时效果应当为

image.png

至此完成了 1.上传图片 2.保存在本地服务器 3.显示

• php代码

我这里使用PHP的CI框架 因为做毕设需要用到数据库，而我本身只会一点点抠脚的java和c，所以选择学习较为简单且文档友好的CI框架来始用PHP操作数据库

move_uploaded_file函数
有两个参数第一个参数需要指定将要移动的图片，第二个参数给定目标目录
也就是说从文件的临时存放目录，存到真正需要存储的目录

作为一个能吃（我不是胖 我只是肉多）能喝（rio ! 来来！我还能喝）的东北爷门，从来都是健健康康的，如果我有病的话，那病的名字一定是：菜。换句话说如果菜是罪的话我大概是死刑了

第二个智商欠费
我不知道！！PHP怎么！！用一个！！！行而有效 且 高端大气的方式 搞出来一个目标目录！我觉得CI框架应该有那么一个方式可以做到但是我不会
你不会百度么
百度都没百度到真是对不起

第三个智商欠费
我本来是将图片存放目录放在项目下也就是bishegogogo下的某个文件夹的
但是！！！前端就是访问不到，network里面200.。。。emmmm不明觉厉，是CI框架还是Apache会组织前端直接拿服务器的图片资源？？不明白。于是将目录放在了 服务器下跟项目同级的目录

今天最蠢的地方在于根本没注意到 Formdata只要传一个form表单数据做参数就好了进行了一系列亮眼的操作。与本次所做的图片上传基本没什么关系。教训在于：网上的文章很多 但是看的时候要仔细，漏掉一句话可能会做很多无用功。