ajax上传图片 form和base64上传 后端上传图片接口测试

用于后端测试，前端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