标签： 上传图片

场景

文件上传

需求

上传本地图片到服务器，上传成功后在网页上显示服务器的图片。

注意：文件上传需要以FormData数据格式提交

HTML代码

<div class="box">
    <div class="pic">
        <img src="./ico.png" />
    </div>
    <input
        type="file"
        accept="image/gif,image/jpeg,image/jpg,image/png"
        style="display: none"
        id="getFile"
    />
  <!-- 隐藏丑陋的input，使用美化后的按钮 -->
    <button id="upload">上传图片</button> 
</div>

JS代码

//...引入axios文件
//...配置axios

//获取文件上传的input并添加change事件
let getFile = document.querySelector('#getFile')
getFile.addEventListener('change', function (e) {
    // 获取文件
    const file = e.target.files[0]
    // 判断是否有值，否则return（不请求）
    if (!file) return
    // 将文件信息传给上传函数
    uploadFile(file)
})

//获取美化后的按钮并添加点击事件
let btn = document.querySelector('#upload')
btn.addEventListener('click', function () {
    getFile.click()
})

//封装上传文件函数
function uploadFile(file) {
    // 创建FormData实例
    const fd = new FormData()
    // 添加文件数据
    fd.append('avatar', file)
    axios.post('/api/upload/avatar', fd).then(({ data: res }) => {
        let { code, url, message } = res
        //判断业务状态码（是否上传成功）
        if (code === 200) {
            alert(message)
            document.querySelector('.pic img').src =
                axios.defaults.baseURL + url
        } else {
            alert(message)
        }
    })
}

重点

通过事件对象获取要上传的文件

        ...
const file = e.target.files[0]
        ...

将文件转换为FormData数据格式

        ...
const fd = new FormData()
fd.append('avatar', file)
        ...