js图片上传 多图上传

以react为背景，先写上传的input

// multiple 属性控制单选或多选 
<input type='file' multiple accept=".png,.jpg,.jpeg,.gif" onChange={(e)=>{

                   	   // 建一个FormData对象
                       const formData = new FormData()
                       
                       // 这里是多选 遍历下 e.target.files
                       e.target.files.forEach(item=>{
                       	// append方法：append(key,value) key是可以重复的，不会被覆盖
                       	// 把图片都用append方法加到formData中，'file'是后台接收图片的参数，由后端定义
                           formData.append('file',item)
                       })
                       // 如果有需要，还可以加上一些其它的参数，比如token
                       formData.append('token','a23ce9sne0sn2nds256')
                       // 如果需要传一个json形式的数据
						const data = {type:1}
						const json = JSON.stringify(data)
						const blob = new Blob([json], {type: 'application/json'});
						formData.append('data',blob)
						
                       // 所需参数都好了，可以调用接口，这里注意 formData 直接传进去，不要用对象再包一层
                       UploadImg(formData).then(res=>{
                           console.log(res,'rerer');
                           
                       })
                    
                }} />

上传方法

const UploadImg = (data)=>{
	//request是封装的请求方法 
	request('https://upload.com',{
		methods:'post',
		data,
		headers: { 'Content-Type': 'multipart/form-data' },// Content-Type 一定要设置成 multipart/form-data
		//onUploadProgress 可以监控上传进度，主要是计算loaded和total这两个属性，有需要可以添加
		onUploadProgress:(e)=>{
			console.log(e.loaded/e.total,'上传进度')
		}
	})
}