本文主要详细介绍原生JS文件上传。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JS文件上传的具体代码，供大家参考。具体内容如下
一、目的：实现上传图片的功能。
二、效果：三、思路：使用input标签自带的upload，先隐藏它，给upload按钮添加一个click事件，绑定input的click事件。
四、代码：//html
输入ref= img-upload-input class= img-upload-input type= file accept=。png，jpg @change=submitUpload
El-button style= margin-top:20px type= primary @ click= handleselectedimg 选择图片/el-button
//js
//点击上传按钮。
handleSelectedImg() {
这个。$refs[img-upload-input]。单击()
},
//选中图片后点击打开按钮。
提交上传(e) {
常量文件=e.target.files
const rawFile=files[0] //仅使用文件[0]
如果(！原始文件)返回
this.upload(原始文件)
},
//上传
上传(原始文件){
这个。$refs[img-upload-input]。value=null //fix不能选择同一个excel
如果(！this.beforeUpload) {
返回
}
//检查文件是否满足条件。
const before=this . before upload(raw file)
如果(之前){
//上传事件
this . uploadsectionfile(this . uploadparams，rawFile)
}
},
上传前(文件){
const islt 1m=file . size/1024/1024 50
if (isLt1M) {
返回true
}
Console.log(上传文件小于50M ，警告)
返回false
},
uploadSectionFile(params，file) {
假设数据=参数
Let=newformdata ()//Formdata对象
letobj=file//相当于在input中获得的文件。
fd.append(stationID ，data.stationID)
fd.append(date ，data.date)
Fd.append(file ，fileObj)//文件对象
补充文件。然后(res={
//调用上传接口
})
}
五、注意事项的封装请求标头为(您不必在以后进行配置)
“content-Type”:“multipart/form-data；”
拦截转换axios请求直接返回
transform request:[函数(数据){
//对数据进行任意转换处理。
返回数据
}],
六、常见问题1.上传文件的同时想上传其他参数怎么办？
您可以将参数和文件放在file对象中。
设fd=新表单数据()
Fd.append(file ，file)//file
fd.append(param1 ，参数)
2.文件大小的限制。
1)限制前端上传文件时可选的文件大小。
2)、后端回弹限制
3) nginx配置限制。当前端发送请求，后端没有收到时，可以检查nginx配置。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
