使用 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)" >&times;</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);
        }
    }
});

}

请问是哪里错了呢?
实在是头疼,谢谢啊,麻烦了。

阅读 16.3k
3 个回答

不要把filelist用JSON.stringify转换,你应该直接把files循环(多张的话,单张直接files[0]),一个一个用formData给append进去,有兴趣可以参考我的博客链接描述

通过FormData的get方法打印
const param = new FormData()

    param.append('imagefile', this.imagefile)
    console.log(param.get('imagefile'))
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题