--------------------------------------------------------------------------------------后端用node.js---------------------------------------------------------------------------
一:前端
前端负责上传图片。用vue实现如下:
html:
<input placeholder="文章缩略图" @change="SetArticleCover" type="file" multiple="multiple" ref='selectfile'>
Js:
methods:{
//上传文章缩略图
SetArticleCover:function () {
var PicData = new FormData();
PicData.append('Content',this.$refs.selectfile.files[0]);
axios.post('/api/UploadImg', PicData
).then(function (response) {
console.log(response.data.data[0]);
}).catch(function (error) {
console.log(error);
});
}
},
二:后端
后端任务是接收图片,返回给前端图片的存储地址。用node.js实现如下:
var Path = require("path");
var Formidable = require("formidable");
var FS = require('fs');
var Express = express();
//需要使用node.js的Express框架
Express.post('/UploadImg',function (Request,Response) {
//Formidable模块用来接收前端传递过来的formdata
var From = new Formidable.IncomingForm();
//设置保存 文件路径
var TargetFile = Path.join(__dirname, './Public/');
From.uploadDir = TargetFile;
//parse方法的回调函数中,fields对象为前端formdata append的一般字段,
//files为前端formdata append的图片文件
From.parse(Request,function (err, fields, files) {
if (err) throw err;
var FilePath = files.Content.path; //此处Content为前端formdata append文件的对应字段
var NewPath = Path.join(Path.dirname(FilePath), files.Content.name);
FS.rename(FilePath, NewPath, function (err) {
if (err) throw err;
var MyJson = {
errno: 0,
data:['http://localhost:8888/' + files.Content.name]
};
Response.json(MyJson);
});
});
});
----------------------------------------------------------------------------------------后端用php-----------------------------------------------------------------------------
如果后端语言php,前端使用FileReader方法,详情请移步此实例详情链接
前端:
html:
<textarea placeholder="说点什么吧..." id="addText" name="txtInput"></textarea>
<input type="file" class="picInput" onchange="imageUpload(this)" multiple="multiple">
JavaScript:
var selectPics = document.getElementsByClassName("selectPics")[0];
var imgArray = [];
//此实例中,选择图片的input,和上传图片的按钮是分开的。在触发上传即此端代码时,下面的imageUpload方法,是绑在input上的已执行完毕
document.getElementsByClassName("right")[0].onclick = function () {
var picData = new FormData();
imgArray = JSON.stringify(imgArray);
picData.append('picInput',imgArray);
picData.append('txtInput',document.getElementById("addText").value);
$.ajax(
{
url:"http://localhost/proxy/sunq/moningNight/app/addshuoshuo.php",
type:"POST",
processData: false,
contentType:false,
data:picData,
datatype:"json",
success:function (ret) {
console.log("ajax成功");
console.log(JSON.parse(ret));
}
}
);
}
/*当input发生改变时,触发此方法。遍历input选中的文件,将文件转成base64字符串存入数组。并将base64转成图片预览*/
function imageUpload(file) {
var arrayIndex = 0;
for(var i=0,f;f=file.files[i];i++){
var fileRader = new FileReader();
fileRader.readAsDataURL(f);
fileRader.onload = function (event) {
imgArray.push(event.target.result);
drawPic(event.target.result,arrayIndex,imgArray);
arrayIndex++;
}
}
}
/*预览照片。动态生成放图片的div,以及取消图片的按钮。当点击取消时,删掉对应图片以及存base64字符串的数组对应的字符串*/
function drawPic(url,arrayIndex,imgArray) {
/*动态生成div*/
var createImgDiv = document.createElement("div");
createImgDiv.className = "createImgDiv";
createImgDiv.id = "createImgDiv" + arrayIndex;
/*动态生成img*/
var imageElement = document.createElement("img");
imageElement.src = url;
/*动态生成取消按钮*/
var cancelButton = document.createElement("div");
cancelButton.className = "cancelButton";
cancelButton.id = "cancelButton" + arrayIndex;
/*img放在div中*/
createImgDiv.append(imageElement);
createImgDiv.append(cancelButton);
/*放着图片的div放在指定位置*/
selectPics.prepend(createImgDiv);
document.getElementById("cancelButton"+arrayIndex).onclick = function () {
document.getElementById("createImgDiv"+arrayIndex).style.display = "none";
console.log(arrayIndex);
// imgArray.splice(arrayIndex,1);
delete imgArray[arrayIndex];
console.log(imgArray);
};
}
后端:
$shuoshuoTxt = $_POST["txtInput"];
$baseArray = json_decode($_POST["picInput"]);
$imgUrls = array();
for($i=0;$i<count($baseArray);$i++){
//过滤base64字符串前缀,解码
$url = substr(strstr($baseArray[$i],','),1);
$pic = base64_decode($url);
// 获取base64图片格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $baseArray[$i], $result)){
// 生成的文件名
$photo = '../pic/shuoshuo/'.randName().'.'.$result[2];
// 生成文件
file_put_contents($photo, $pic);
//把php数组转成json
array_push($imgUrls,substr($photo,3));
}
}
//把存着多个图片地址字符串的数组转成json字符串,再往数据库里存
$imgUrlsJson = json_encode($imgUrls);
//连接数据库,存json字符串
$connent = new mysqli("localhost","root","","moningnight");
if($connent->connect_error){
die("连接失败:".$connent->connect_error);
}else{
}
$insertdata = "insert into shuoshuo(shuoshuo,pic) values('".$shuoshuoTxt."','".$imgUrlsJson."')";
if($connent->query($insertdata)==true){
$json = [
"code" => "200",
"jsondata" => '添加成功'
];
echo json_encode($imgUrlsJson,JSON_UNESCAPED_UNICODE);
}else{
echo "Error insert data: " . $connent->error;
}
mysqli_close($connent);
//随机生成移动后的文件名
function randName() {
$str = 'abcdefghijkmnpqrstwxyz23456789';
return substr(str_shuffle($str),0,4);
}
-----------------------------------------------------------------------------------后记------------------------------------------------------------------------------------
第一个实例,即用node.js做后端时,如果前端也使用FileReader,那么对应的后端node.js代码就不是这样了,需要你自己重新写了。
FileReader得到的base64编码的图片放在formdata中上传的数据结构截图:
file文件上传时的数据格式截图: