上传文件至后台 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天

青训营项目中要用到上传文件 之前做过但忘得差不多了😵 所以来记录一下📝

首先利用input标签的type属性 同时还有accept属性 可指定上传文件类型

   <label for="file">上传图片</label>
   <input type="file" id="file" hidden />

首先利用input 的type属性中的file 实现点击选择文件 由于默认样式不太美观 使用hidden属性隐藏

我这里使用label标签的for属性 实现点击label触发input

实际还可以在hidden的基础上 利用按钮点击触发 以vue为例

<template>
​
​
<input type="file"  hidden  ref="file"/>
<button @click="upload">点击上传</button>
</template>
​
<script>
    export default{
        methods:{
            upload(){
                this.$refs.file.click() //触发点击事件
            }
        }
    }
</script>

上传文件后 要怎么解析文件呢 这就要用到FileReader了

利用new FileReader()生成FileReader实例 然后调用其方法来解析文件 以图片为例

JS

const file = document.getElementById('file') 
file.onchange = function (e) {
           const p = e.target.files[0]
           const reader = new FileReader()
           
           reader.onload = function (res) {
            const url = res.target.result 
            const img = new Image() //可定义图像尺寸
           //在img赋予src  并加载完触发
            img.onload = function () {
                
                
        document.body.appendChild(img);
            }
            img.src = url
           }
           reader.readAsDataURL(p)
        }

利用其readAsDataURL方法 将文件读取为 DataURL readAsDataURL方法， 需要传入一个参数

传入file.onchange的事件对象e.target.files[0];

执行readAsDataURL方法后 触发reader.onload生命周期函数 参数中有文件读取的结果

比较常用的还有excel的上传并发向后端

<el-button type="primary" @click="selectFile"
            >导入留校生名单<input
              type="file"
              hidden
              ref="file"
              @change="importList"
              accept=".xls,.xlsx"
          /></el-button>
​
​

 importList(e) {
        const file = e.target.files[0];
        let formData = new FormData();
         formData.append("excel", file);
 }

excel文件发向后端 通常需要以formdata格式参数发送

formData.append("excel", file,filename);

formData.append("key", value);

若传递文件 需要第三个参数 为文件名

同时在发送请求时 需要指明请求头header mulpipart/formData

使用axios建议不设置请求头 浏览器会自动给请求头添加

如果设置了请求头 boundary就会被覆盖, 然后上传时就没有数据传到后台和后台报错 “no multipart boundary was found”

export function importList(formdata) {
    return requests({
        url:'/DataInput',
        method:'post',
​
    })
}

💭💭💭

记录前端学习中的问题📜
若本文对你有帮助 欢迎点赞收藏👍📑
若有纰漏，敬请包涵，评论区欢迎指正👂