辉太郎看前端(移动端图片上传)

前言

图片上传一直是一个难点，今天带大家去看看吧！

效果实现

• 组件的使用

在实现效果时，用到了vant中的van-action-sheet(动作面板组件)，van-uploader(图片上传组件)，van-button(按钮)，用到的图片上传中的一个回调函数after-read

• 代码演示

1. 样式排版

<van-action-sheet v-model="imgShow" cancel-text="取消" @cancel="onCancel">
      <p class="box">
        <van-uploader>
          <van-button>拍照</van-button>
        </van-uploader>
      </p>
      <p class="box">
        <van-uploader :after-read="afterRead">
          <van-button>手机相册选择</van-button>
        </van-uploader>
      </p>
    </van-action-sheet>

2. 功能实现

 afterRead(file) {
      let content = file.file;
      let data = new FormData();
      data.append("file", content);
      this.$http.imgList(data).then((res) => {
        console.log(res);
        this.$http.city({ avatar: res.data.data.path }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success(res.data.msg);
            this.imgShow = false;
            this.getlist();
          } else {
            Toast.fail(res.data.msg);
          }
        });
      });
    }

注：new FormData()
用一些键值对来模拟一系列表单控件：也就是把表单中的name和value组装称一个queryString.
异步上传二进制文件

let formData=new FormData()
formData.append() //结尾插入指定内容
formData.get()//获取
formData.delete()//删除

注： 调用的接口是封装过的，这边代码仅供参考。

总结

初出茅庐，请各位大佬多多指教👐。