- 图片转base64 base64 转blob
- 关于 processData: false,
contentType: false,
processData 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false
比如var formData = new FormData();
formData.append("xxx","xxxx");
异步发送这个数据的时候必须设置processData:false
contentType：“application/json” 必须是json数据， 注意 name:"xxx" 这个不是json串 ，所以不可以设置contentType 让他默认即可
在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#pre-img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="file" />
</form>
<button id="btn">使用二进制上传图片</button>
<button id="btn1">使用base64上传</button>
<img id="pre-img" src="" alt="">
</body>
</html>
<script src="./jquery.min.js"></script>
<script>
var img =
'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAyUSURBVFhHNZh5cF5lFcbfu3z7ly9J01alMjquhdKmSdPFVhwZpMqgDlpRKK0oda2FQhfaNGmz70mzf1mapQ1USmHGwf9wnxEV1FFnHJhRoPuS7vuGzjz zpf6xzv3fvfmvuc55zznOeeN67zg1HHeqe2sr9YzgVpO271T70Vf2UuBsudj6j2bUOMxp9oTTjXnfG067utbvwu0tDfUBx7zlFrqVFA6tTKs/OKIMnMDTfuM0 w1MS0fLdKK32f03XfSWnsw1IaDntaxnj0SaAv7Vp/w5HYCxAw3n/LUBIidFz31Xwk0eClU9kKonrNRtZ0MVHcyVN3phJ46FWr1mzHd15fQR1b6yl8CgPmsEqck1/gC7ovjSpb5 tCqiO4di mRN5y 16gdYfTevZgXM/ 2 nZd53KDcRJT63nANJGNJrPODWecuoB1NBVTyPXohq6HKgPUE2A3MG7akBsOhrR439J6MGJfH3sOzHNWBJqRnGg/DlOefNDpUqiSpdElFjsa Y3fX12OKEVbwaAcFp3BOOHAq1/19fTB522AaLmpFM7zvZe9uVaANKCsfbznoavOo1ecRq5Gmroikd0AlWf9bT1DOE8ltaT//D08EShPrkmUOEyAxHRDAwXFHtKzg2VKUkqfz5Avuq0pN/XV39LJP5taXDadMDXZq4bjnlaP mrChDN0KHnUlTZy0TEPG4HTA cGAbEOA9HLkfUy7N63m3jjzeeyNOaP2f0hb2eStdFVbDMKU34p80LlJnjqbA0UAoA0fmBZi73VdLhaeXreVr7XqhnDnva G6obe9Gte2Q0xYAbIKLzXCtA0ez2Bq45ORaMWihGbjGA6LQb6CIQusZUJ8O9dSBqFa9kdbyibTufi7UrAcAgeGC0pimlYQqLHaaVuopQWTSy50WVkX1 OspPf1OnjYfg4xHfW07EmoHJK0iHTsmnSoNiAXggkf6ffgIkM5LRk6ICSe6ANLKHxhxqyDoBjix8i lu9PaPbGqIoejKgQMibx3jiRN9dT0TynomJI 9k83bUl1NdeS lHb3t67khcFacSKqfCtrNqJwPVn/bhY6AmnDVetp6zTHgavGxAQNQNsm5etvCg5YKvhtMRbT3ma81bge7/ua PVxGFBz0VLMzk0hC7x1dmAdwo8eCIrzuXJPWplR/WV17 kL4NMSuIpn2/7VhMlVRFLXs34nDrxRiGY qjKNoBYBU7BQSyNp0NVEPZ1vLQytdSVUeVrH8PYv4i0Jx20vAt9GGR0x2z45o 1yl1D1VCFDJzopq2JE f/HFKD72ar7XvxFSB1lTxfQ3preVq1diOcztxuIu9jQaWhWHsDRARk4kBA1IPeWpO jlRaUG8avBm02Ffj/4uprKdUQQrVGyZr/RcX4X3hEqgFflcp8 NEyFPH10d6uH9d2jdWzO0/VQaABg/DwcuRtUAIZsxlgNyCSAGAgBWCIMXAcLv7JWI hBOVzsJH456ajiRUP2FGGoX6tHfJ7Q0m9CHn4gpvywBgDwVzI0pBTEDCFrA7/ySuO58xNd9Y1H95K04PIiQ1ria8bbtfERt7NV8YYoPtjogZA8V2Q2wfqgwwP0gBdLLMoDORKXxFPJ Oq5nCOtjb/ha2hfozjXwYhlknEv470Yf7gmmlHNeUvGyiGY9impmQz35d09biKal1Mhn0Wih2lrOERXjG89MBpqJRCf3AzwbOO rH2CDNwL1X49OCVojLzsITT0gVv8z1AN7Y/r49xMqQiuKIKOpZkFxTEmA5M3z0YtQ SucyvYEWvXXUJuJpmlRG4Ya0ZztVFvt7b7UQGU08K4e7rWTCjOYNe0gIkMUxtA1gCGiA iXa0FiW8 ltOltpy//LKNPb0go/76UpqGahRAzj3REARAtRjnL4MaXPC3qiumhP0b0I5pW45mIOnDGWkUDQCpPRlSNetaR8gYANN4u051EoM A5MDcBgKIPp73ApJek9b2g4V67LWIFtZAwId8JUtSmjE/iT6QDnQiWRZTbHEEgL7urohoxWuF s6/fJXTrNouhnRvX23cN5zxtONEoEoA1iLjdceRA8B0mzEMZ ljA6wsETAQg9e8XJSshF3t4aR 8IcCLelxmvUwHCjDMDywdGSIRpr0JEujin/eqeS5lJb/KqEn/5nR5kMpdCc2pT0YaqVc69GMKlJScTxUJSJWx30Hz615Wj xNGQtCqTERKwfQN2Qu8uArEU5H3o qplrnabT0lML4AVkzJShH7R2S01qYVSz12X09X0f1Ar6xfrjGbVMTicScTUQ1kY2bcRzM1xlEk4FWXdtQha6IG0/f2OGLQr9gOjhmpuDWJZS63Xui/simv0U7ftevF I0VKEyoYaeFFIlWSWepr1hNPyV1J69C2k xA8OBXTdkJvfcN0p4pViXCV2zJA1lm5WpVkTS9YQ3g/fNWHJ05dRuxLlDjPe7nPGpC7tvoqollZD7GhJg0nptNVZ5KezKKk7mTuuG9XUj/8R77WH0ozFmAYNd6OoUoiUH506mqKupX76lNBTrx6WDmtwPAwPBgBxC6W8aMbAB2876a3DViKAOPyvuSrAF7MQLJTjHmF86a0I1Ma0fRHIlo2nNJjf/Vz41398ajqKMcqQGzH wrIuOU2kFruG9CTrvPRHAmHzDCGRknF6HVPY9f5bdwAiFWKRcrKd4R3WUC5DBUxY0FCM cnNL0kxtiXVGJRXDO GWhxH2Ph30KtPeThKaSkFGsJez0ErD7t5QBUQVCrjmae91M5uwGw 6bT2A0AYGgMPuzG2J4bBmwKiHHlhetOEzwfpoq6GMpcEbNEId6nFyQ1c05acTiSR/Us7Hda Senn/xrKvwN5yKqJ f1CFYjymmzZhUA6ri2AHIQr35609P WxhgGYD/g5i4SWoMBFHYRbRG b0XkD/lmgPCvs4ImSYlKaJQuDiuDIJV2upp1ZtRrT8IIY9jyNQRQlYzMjaeiaqaZzbkNCBaLUSmh/fjePjS 06vsCYsIhgeB8h4Lip4DhdyQHg2SppeugXwW4GGrwWMIEQkY VqZbuIZrY8VHGlp8d/E9GGIxHtYJBpQ3nbDASh33EmxiRPNIhEPVGwKa6TNJlKvsCm 2952gcgS8kunlkURm DsGV/N8Iau0ZESNWYCRoa0oUjzibuNEA LmI7qpwWvXLIm09kKS8ArVDNmvhTZOMeScAczqa0wnrIW140ckGNlqOs Hem6FevB5oAiJaqdradcV4wShokk7q7H4MIHsAMsbeNiLuZI8eK9/EvbT5z3la r079I1fx1V YJbqJ1PquxFSXlMGmybjRCCWI2o1FWOd1JpYJxtY Y1D0OcJ8QSbj/FsiLK1QXzX1YB7ypgmN8woOsqgPM7vPaRmGFBWtnaEGeDe5S3O0ye n6dHXs3kDj2NF NqR2z6rkbUiSemfC2QyVbuAEY0TJCsP/QBph8gpg/jpGAED40XE Y1JLXqsIY2gIwboDEAPn8zyBG480qMaNjzKQfcR1bGdf/uUD94O67KyYSaryQYZCAhhm2WMO8bSU8jIbSZw4jVfzlEC/yckSzGc chjO/m jyR3HczkvPatMLUNec1o I4zo1dZzTkG5N1m133kNJ9gHMP7ElpNQenteS AnKactZAxBom Rq8r2HQqblAawdIE4C62bCf8S5rsyYbDbHpLgzu5vri 4Fe W8M4sZR0ghDOQb5bidgeiH98GUOU3xng7otc2CCb166FZH7xptOT3IAWkdJlptUwwMTqkoDhlxvRic2o5iV3FtfyXkCkYc4ggwbJywS8OGFGx4gQr38nyiRwSDvO3DERLCdFHTS/LoZHS21NsGbuo5QOeNEZOJWKLf6HccJPaaNNDMTLusZdWhFxYkwd0Zde4Buy7Wcs2sN73rsUERajJCmFRN4tQcweyGrgdhr8s4h3ib2VjiVG4pIZ4el9v/AiGAXa/AaR9vrHC/gkPvxUbwmGtWAqOXDhrMhHEkABEGzEzyH5k1IfC0tvY3Bx4AYL0wTDIhJ9YvI Ut4tf/9KMQzgnKcxKB1YANi1WXqac/sXyBdNoNw7YfAfaTZisJtZKyrJg2teGv/HrDTeTMRKWcWfYYqepqI2b2d/noBYR9bR7W sQfh2gsIWybXe0nPKJ72GNkB0WYgiJ6B7za94Ld538Oyad70wyqwnXu3jUg0IdMd5L8bZIauEWDlh502kpItR3yG3zC3manlLlhvXdTUc8KAWPMiPcYRK91BNu4FiP3PpYv09dmRAcN9GDOJH0H0bFw0jtjAZKTtvODpf58FEmz EY77AAAAAElFTkSuQmCC'
// var formData = new FormData($('#uploadForm')[0]);
btn1.onclick = function () {
uploadFile(1);
}
btn.onclick = function () {
uploadFile(2);
}
function uploadFile(type) {
var file = document.getElementById('file');
var formData = new FormData();
var url = URL.createObjectURL(file.files[0]);
getImgBase64(url, function (img) {
$('#pre-img').attr('src', img);
// formData.append('FileContent', img);
// formData.append("FileContent", file.files[0]);
var fileImg = type === 1 ? img : dataURItoBlob(img);
formData.append("FileContent", fileImg);
var filePathArr =file.value.split('\\');
var fileName = filePathArr[filePathArr.length - 1];
console.log(dataURItoBlob(img))
formData.append("FILEPURPOSE", 'A');
formData.append("FileName", fileName);
formData.append("System", 'SMARTMRO');
formData.append("Module", 'ITEMMASTER');
formData.append("cuser", 'admin');
formData.append("Rno", 'IM20190809063');
$.ajax({
type: "post",
headers: {
Authorization: 'Bearer'
},
url: '/api/IMPRCS001/Upload',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (res) {
console.log(res)
}
})
})
}
function image2Base64(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
function getImgBase64(src, cb) {
var base64 = "";
var img = new Image();
img.src = src;
img.onload = function () {
base64 = image2Base64(img);
cb && cb(base64);
}
}
function dataURItoBlob(base64Data) {
var byteString
if (base64Data.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(base64Data.split(',')[1])
} else byteString = unescape(base64Data.split(',')[1])
var mimeString = base64Data
.split(',')[0]
.split(':')[1]
.split(';')[0]
var ia = new Uint8Array(byteString.length)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], {
type: mimeString
})
}
</script>
- 使用原生ajax上传
var xhr = new XMLHttpRequest();
xhr.open('post','/api/IMPRCS001/Upload');
xhr.setRequestHeader('Authorization', 'Bearer');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4&&xhr.status ===200){
console.log(JSON.parse(xhr.responseText))
}
}
xhr.send(formData);
网友评论