本文共 1935 字，大约阅读时间需要 6 分钟。

手写input的方法

1.书写上传的input的按钮

上传本地文件

​​​​​​​

type类型，表示的是一个上传文件的input

2.对应的change事件

change(e) {      // 手写的input需要一个对象将本地图片转换为对应的格式来上传      let formData = new FormData();      // e.target.files就是选中的文件的一个数组      formData.append("file", e.target.files[0]);       // 将formData这个对象传给修改头像的接口      updateImg(formData).then(res => {         if (res.code == 200) {          Toast(res.msg);     //  res.data.path就是返回的头像网址，具体还要看返回的数据          this.userData.avatar = res.data.path;      // 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台的处理          updateUser({ avatar: res.data.path });         }       });     },

3.对应的input的样式修改

选择文件    

css结构

.file {    position: relative;    display: inline-block;    background: #D0EEFF;    border: 1px solid #99D3F5;    border-radius: 4px;    padding: 4px 12px;    overflow: hidden;    color: #1E88C7;    text-decoration: none;    text-indent: 0;    line-height: 20px;}.file input {    position: absolute;    font-size: 100px;    right: 0;    top: 0;    opacity: 0;}.file:hover {    background: #AADFFD;    border-color: #78C3F3;    color: #004974;    text-decoration: none;}

vant的upoader组件的 使用

1.使用这里是基础用法

2.文件上传

methods: {     afterRead(file) {      // file就是上面的手写input中，经过FromData包装过后的那个图片地址，可以直接上传至服务器       updateImg(file).then(res => {        if (res.code == 200) {          Toast(res.msg);     //  res.data.path就是返回的头像网址，具体还要看返回的数据          this.userData.avatar = res.data.path;      // 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台是否有过处理          updateUser({ avatar: res.data.path });         }           },   },

注意事项

• 手写input需要使用一个FormData对象来转换格式，而vant的file是已经转换好的
• 这个转换过的格式，就是一个对象，直接将整个对象当成data参数传递即可，具体情况看项目接口而定
• 传递过后，后台会返回数据，其中的data.path就是修改后的头像网址链接
• 有些项目如果后台没有处理的话，需要我们在次将这个头像网址，传递给修改用户信息的接口，已达到修改头像的目的

elementUi的头像上传

注意：在每个事件中，都会自带一个参数，从里面可以找到两种格式的图片，https网络格式与"tmp_uploads\468f50432ed8b67b89e2490dc9e7f34d.jpg"本地格式，到时候上传哪种格式的图片，看接口文档的要求

如果是要做图片的预览功能，弹框需要自己写，可以在on-preview事件里，获取到当前点击的图片的网络格式

转载地址：https://blog.csdn.net/weixin_58102387/article/details/122991403 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！