怎么用原生JS实现文件上传(JS,开发技术)

一、目的：

实现上传图片功能

二、效果：

三、思路：

用input标签自带的上传，先隐藏掉，给上传按钮添加点击事件，绑定input的点击事件

四、代码：

//html<inputref="img-upload-input"class="img-upload-input"type="file"accept=".png,.jpg"@change="submitUpload"><el-buttontype="primary"@click="handleSelectedImg">选择图片</el-button>

//js//点击上传按钮handleSelectedImg(){this.$refs['img-upload-input'].click()},//选好图片之后点击打开按钮submitUpload(e){constfiles=e.target.filesconstrawFile=files[0]//onlyusefiles[0]if(!rawFile)returnthis.upload(rawFile)},//上传upload(rawFile){this.$refs['img-upload-input'].value=null//fixcan'tselectthesameexcelif(!this.beforeUpload){return}//检查文件是否满足条件constbefore=this.beforeUpload(rawFile)if(before){//上传事件this.uploadSectionFile(this.uploadParams,rawFile)}},beforeUpload(file){constisLt1M=file.size/1024/1024<50if(isLt1M){returntrue}console.log('上传文件不超过50M','warning')returnfalse},uploadSectionFile(params,file){letdata=paramsletfd=newFormData()//FormData对象letfileObj=file//相当于input里取得的filesfd.append('stationID',data.stationID)fd.append('date',data.date)fd.append('file',fileObj)//文件对象supplementFile(fd).then(res=>{//调用上传接口})}

五、注意事项

封装的请求头是（后面发现也不一定要配置这个）

'Content-Type':'multipart/form-data;'

axios request的拦截转换直接return

transformRequest:[function(data){//对data进行任意转换处理returndata}],

六、常见问题

1.上传文件的同时要传别的参数怎么办？

可以把参数和文件装在一个文件对象里面

letfd=newFormData()fd.append('file',file)//文件fd.append('param1',param)

2.文件大小的限制问题

1）、前端上传文件时限制可选文件大小
2）、后端Springboot限制
3）、nginx配置限制，当前端发送请求后端接收不到的时候，可以检查nginx配置。