前端本地图片上传

前言

作为前端工程师，我们在做项目时会不可避免的遇到上传本地图片的功能，今天笔者就来说一说如何上传本地图片

---

一、img文件上传步骤

1.input标签设置

上传本地图片的第一步是设置input的type为file,需要注意的是为了不影响布局需要把input框设置为隐藏状态,并且设置一个change事件。

<input
type="file"
ref="file"
style="display: none"
@change="inpu()"/>

2.点击按钮弹出本地文件夹

当点击按钮时，触发this.$refs.file.click()事件打开本地相册

this.$refs.file.click()

3.获取本地图片数据

选择本地图片后通过input的change事件获取event.target.files[0]数据

let from = new FormData();
from.append("file", event.target.files[0]);

4.请求接口转换img

请求数据将from数据转换成线上地址

let { data } = await this.$http.post(
        "",
        from
     );

5.数据上传

将转换好的数据上传到服务器

let { data: req } = await this.$http.put(
        "",
        {
          avatar: data.data.path,
        }
      );

6.重新调取数据

重新调取数据完成页面刷新

---

总结

以上就是笔者对图片上传做的一些总结，分享出来给各位读者参考