你可以创建一个Formdata对象,然后通过调用它的append()方法添加字段,就像这样:
var formdata = new FormData()
formdata.append("username", "Groucho")
formdata.append("password", 123456) // 数字 123456 会被立即转换成字符串 "123456"
// HTML 文件类型input,由用户选择
formdata.append(“userfile", fileInputElement.files[0])
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], {type: "text/xml"})
formdata.append("webmasterfile", blob)
var request = new XMLHttpRequest()
request.open("POST", "http://foo.com/submitform")
request.send(formdata)
通过HTML表单创建FormData对象
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
你也可以将base64转成blob,然后上传到服务器,后端一样可以得到图片
前端代码:
var _baseURL = "data:image/gif;base64,........" // 假设这个是图片的base64数据
var formdata = new FormData()
formdata.append("file_n", dataURLtoBlob(_baseURL))
formdata.append("name", nameEl.value)
formdata.append("pwd", pwdEl.value)
$.ajax({
url: "/signupu",
type: "POST",
data: formdata,
cache: false,
contentType: false, // 不可缺
processData: false, // 不可缺
success: function (data) {
console.log(data)
// do something you want
}
})
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
后端代码:(nodejs):(这里使用formidable中间件)
var form = new formidable.IncomingForm();
//设置编辑
form.encoding = 'utf-8';
//保留后缀
form.keepExtensions = true;
//设置单文件大小限制
form.maxFieldsSize = 1024 * 1024 * 1024;
//form.maxFields = 1000; 设置所有文件的大小总和
form.parse(req, function(err, fields, files) {
var file = files.files
var t = (new Date()).getTime();
//生成随机数
var ran = parseInt(Math.random() * 8999);
var ran1 = parseInt(Math.random() * 8999);
//拿到扩展名
var extname = "." + file.type.split("/")[1]
var oldpath = path.normalize(file.path);
//新的路径
let newfilename= t + "" + ran + "" + ran1 + extname;
var newpath = "public/images/uploadImage/"+newfilename;
console.log(newpath)
fs.rename(oldpath, newpath, function(err){
if(err){console.error("改名失败"+err); }
res.send({test: "OK��"})
})
})