用于后端测试,前端ajax上传图片。
JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
Vue input上传图片
小程序选择、预览、删除、上传图片
Demo:
图片上传测试
section {
width: 1000px;
margin: 50px auto;
box-shadow: 0 0 5px 5px #eee;
padding: 20px 20px 40px;
}
#api {
width: 300px;
padding: 10px
}
输入测试接口:
form表单提交:
base64:
输出:
$('#img').change(function(e) {
letfile= e.target.files[0];
letparam=newFormData(); //创建form对象
param.append('file', file, file.name); //通过append向form对象添加数据
// console.log(file)
$.ajax({
url: $('#api').val(),
type: 'POST',
data: param,
contentType: false,
processData: false,
})
.done(function(res) {
console.log("form-----success");
console.log('form:', res)
$('#res').text(JSON.stringify(res))
})
.fail(function() {
console.log("form----error");
})
.always(function() {
console.log("form----complete");
});
});
$('#base64').change(function(e) {
letfile= e.target.files[0]; // 获取图片信息 可以从中获取图片大小
letreader=newFileReader();
reader.readAsDataURL(file); // 读出 base64
reader.onloadend=function() {
// 图片的 base64 格式, 可以直接当成 img 的 src 属性值
letdataURL=reader.result; // dataURL 为图片 base64 码
// 下面逻辑处理
$.ajax({
url: $('#api').val(),
type: 'POST',
data: {
img: dataURL // img 为后端接收参数
},
})
.done(function(res) {
console.log("base64 -- success");
console.log('base64:', res)
$('#res').text(JSON.stringify(res))
})
.fail(function() {
console.log("base64---error");
})
.always(function() {
console.log("base64----complete");
});
};
});
github: https://github.com/hlbj105/upload-image
领取专属 10元无门槛券
私享最新 技术干货