原生JS实现文件上传原生JS实现文件上传

本文实例为大家分享了JS实现文件上传的具体代码，供大家参考，具体内容如下
一、目的：
实现上传图片功能
二、效果：

文章图片

三、思路：
用input标签自带的上传，先隐藏掉，给上传按钮添加点击事件，绑定input的点击事件
四、代码：

//html选择图片

//js//点击上传按钮handleSelectedImg() { this.$refs['img-upload-input'].click()}, //选好图片之后点击打开按钮submitUpload(e) {const files = e.target.filesconst rawFile = files[0] // only use files[0]if (!rawFile) returnthis.upload(rawFile)}, //上传upload(rawFile) {this.$refs['img-upload-input'].value = https://www.it610.com/article/null // fix can't select the same excelif (!this.beforeUpload) {return}//检查文件是否满足条件const before = this.beforeUpload(rawFile)if (before) {//上传事件this.uploadSectionFile(this.uploadParams, rawFile)}},beforeUpload(file) {const isLt1M = file.size / 1024 / 1024 < 50if (isLt1M) {return true}console.log('上传文件不超过50M', 'warning')return false},uploadSectionFile(params, file) {let data = https://www.it610.com/article/paramslet fd = new FormData()// FormData 对象let fileObj = file// 相当于input里取得的filesfd.append('stationID', data.stationID)fd.append('date', data.date)fd.append('file', fileObj)// 文件对象supplementFile(fd).then(res => {//调用上传接口})}

五、注意事项
封装的请求头是（后面发现也不一定要配置这个）