使用 FormData 上传图片,调试中看不到图片的二进制数据,却显示为[object File]
如上图所示, name="files"的应该显示的是一个图片的数组,希望可以看到图片的二进制数据以及它的图片名称与图片类型,但是却显示个 [object File],这是什么情况,该怎么解决呢?谢谢!刚上传了两张图片。下面是图片的获取方法及上传图片的方法:
图片的获取及预览方法:我把获取的所有图片都push到一个数组中,通过sessionStorage传递这个数组
function getImgList(){
var myfile = document.getElementById('file');
var List = document.getElementsByClassName('img-list')[0];
var fileArr = [];
var fileEntity = {};
myfile.addEventListener('change', function(event) {
var files = this.files;
if(!files)return;
if(files.length > 0){
jQuery('#imgList').show();
}else{
jQuery('#imgList').hide();
}
if(files){
for(var i = 0;i<files.length;i++){
fileArr.push(files[i]);
sessionStorage.setItem('arr',fileArr);
//预览
var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'" data-preview-src="" data-preview-group="1"><span class="close" onclick="closeli(this)" >×</span></li>';
List.innerHTML+=oLi;
}
}
});
}
下面是上传图片及其它数据的方法:
function addTicket() {
var url = MyAnviz.baseUrl + '/ticket/index/save.html';
var title = jQuery('.js-ticket-title').val() ? jQuery('.js-ticket-title').val() : '';
var categoryValue = jQuery(".js-category").val() ? jQuery(".js-category").val() : '';
var modelValue = jQuery('.js-model').val() ? jQuery('.js-model').val() : '';
var troubleValue = jQuery('.js-trouble').val() ? jQuery('.js-trouble').val() : '';
var textareaValue = jQuery('.js-textarea').find('#textarea').val() ? jQuery('.js-textarea').find('#textarea').val() : '';
var imgArr = sessionStorage.getItem('arr');
var formData = new FormData();
formData.append('title',title);
formData.append('product_id',modelValue);
formData.append('ticketcategories',categoryValue);
formData.append('content',textareaValue);
formData.append("upfile[]", imgArr);
mui.ajax({
type: "post",
url: url,
data: formData,
cache: false,
processData: false,
contentType: false,
beforeSend: function(data) {
if(data.readyState == 0) {
jQuery('.anviz-loading').show();
}
},
success: function(data) {
if(data.success == true) {
mui.back();
jQuery('#imgList').empty().hide();
} else {
mui.toast(data.message);
}
},
complete: function(data) {
if(data.status == 200) {
jQuery('.anviz-loading').hide();
}
},
error: function(data) {
if(data.success == false) {
mui.toast(data.message);
}
}
});
}
请问是哪里错了呢?
实在是头疼,谢谢啊,麻烦了。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
不要把filelist用JSON.stringify转换,你应该直接把files循环(多张的话,单张直接files[0]),一个一个用formData给append进去,有兴趣可以参考我的博客链接描述
通过FormData的get方法打印
const param = new FormData()
也遇到了这个问题 请问解决了吗