本文主要详细介绍原生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配置。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。