实现图片上传和预览以及多图上传

前言

关于图片上传方法采用的是创建FormData对象处理文件数据和表单数据

预览图片

 function upload(th) {
        var file = th.currentTarget.files[0]
		// 创建文件读取对象
        var reader = new FileReader()
        reader.readAsDataURL(file)
        // 图片预览
        reader.onload = function (res) {
            var temp = `<div class="imgBox" οnclick="previewImg(this)">
                <img src="${this.result}" alt="" />
            </div>`
            $(".imgContent").append(temp)
        }
	
    }

上传图片

	// 创建FormData对象
       var formdata = new FormData()
       //第一个参数是后台接口字段名
       formdata.append('file',file)
       // 采用ajax请求
		 $.ajax({
                type:'post',
                url: '',
                data: formdata,
                processData: false,
                contentType: false,
                dataType: 'json',
            })

processData设置为false是因为提交的是FormData数据，不需要对数据进行处理，contentType设置为false是因为FormData默认的是multipart/form-data请求头，所以不需要设置请求头。
FormData上传等同于原生表单提交设置请求头multipart/form-data
原生表单提交请求头是x-www-form-urlencoded

多图上传

多图上传的话只需要把上传的图片对象放到一个数组里，然后在提交的函数里用formdata对象处理图片。

		  if(fileData && fileData.length > 0) {
            fileData.forEach(item => {
                formdata.append('pictures[]',item)
            })
        }

这样提交后后台只需要对pictures这个数组里面的图片处理就行了。