在《Node.js+express+MySQL使用七牛云实现的用户头像修改》,咱们已经实现了使用MUI作的H5的app实现了图片的上传。如今公司的PC端须要实现图片的上传,可是以前图片上传的接口已经写好了。就是《Node.js+express+MySQL使用七牛云实现的用户头像修改》里提到的接口。
如今前端要作的就是去适应这个接口。通常作的都是表单提交,显示使用的ajax。
HTML代码:javascript
<input type="file" id="uploadFile" onchange="inputchange('5')" filetype="image/*"/>
前端js代码html
// 图片选择改变事件
function inputchange(tag){
var inputTag = 'uploadFile' + tag;
var file = document.getElementById(inputTag);
if(window.FileReader){//chrome,firefox7+,opera,IE10+
oFReader = new FileReader();
oFReader.readAsDataURL(file.files[0]);
oFReader.onload = function (oFREvent) {
uploadImage(oFREvent.target.result,tag);
// oFREvent.target.result 结果就是base64的数据
};
}
}
// 图片上传
function uploadImage(imageData,tag){
$.ajax({
url: '/api/upload',
data: {
imgData: imageData // 图片数据流
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
if (data.status == 100 ) {
var img = '#image' + tag;
$(img).attr('src',data.imageUrl);
}else{
alert('图片上传失败!');
}
},
error: function(xhr, type, errorThrown) {
alert('网络异常,请稍后再试!');
}
});
}
这里主要的重点是FileReader这个的使用。前端