VUE哔哩哔哩移动端项目使用vant 实现发布功能（上传文件）

bilibili发布页面主要有：发布按钮、多行文本框、一个上传图片的按钮（此处使用了vant）

组件里面的头部有：左返回按钮（使用vant）、发布按钮

      
      
      

        发布
      
    

需要实现功能：当文本框输入内容时 发布按钮就会高亮。

实现思路：使用computed监听文本框的变化，当文本框的内容长度>0时，就调用isHighLight函数，动态改变按钮的class名（rel-highlight），即改变了按钮的样式 。

v-model.trim=“msg” 给文本框的内容进行双向绑定 同时删除前后空格 （当输入空格时 发布按钮的事件并不会触发 不会高亮）

computed: {
    isHighLight: function () {
      // 判断文本框是否输入内容 有内容是true 就调用高亮函数
      return this.msg.length > 0;
    },
  },

上传文件：此处使用了vant

想要实现的效果就是这样的 但是当时出现了一个问题，就是我向后端发送请求之后 图片预览不出来。 （vant官方图片之所以能预览出来，是因为它自动将图片发送到vant的服务器，所以能展示出来。）
解决方法：查找vant文件上传的官方函数有:before-read=“beforeRead” 是上传前置处理，类似于钩子函数，在图片上传到vant服务器之前，将图片/视频的地址发到后端的服务器，如果上传成功，后端把拿到图片的地址和文件类型返回过来，图片/视频就可以展示出来。
:after-read=“afterRead” ： 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象，将图片展示出来。

  
      

        

       	 
       	  //当上传的文件类型为0时 就显示图片；是1时就显示视频
          
          
        
        
        
      

调用 beforeRead函数，将文件的地址和类型传送到后端服务器 成功之后拿到返回值，显示出来：

methods: {
    beforeRead(file) {
      console.log("file", file);
      console.log("file.type", file.type);
     
      //判断文件的类型是否是图片
      let type = file.type.indexOf("image") == -1 ? 1 : 0;
      
      //使用FormData 的最大优点就是可以异步上传二进制文件
      const forms = new FormData();
      forms.append("filename", file); // 增加文件的参数
      forms.append("type", type); // 增加类型参数

	//获取返回过来的图片/视频 进行展示
      axios({
        url: "/bili/dynamic/uploadPicture",
        method: "post",
        data: forms, //URLSearchParams对象用于处理URL中查询字符串，即？之后的部分。
        headers: {
          "Content-Type": "multipart/form-data",
        }, //php 默认要求传递请求头
      })
        .then((res) => {
          console.log("返回res.data", res.data);
          // if (res.data.data.code == "0") {
          // if(res.data.code == 0){
          console.log("上传成功", res.data.msg);
          let imgInfo = {
            Mysrc: res.data.url,
            type: res.data.type,
          };
          this.fileMe.push(imgInfo);//fileMe是在data里定义的 是个空的数组 存的是上传图片的地址和类型
          console.log("this.imgUrl", this.imgUrl);
         
        })
        .catch((e) => {
          console.log("服务器出错", e);
        });
    },

点击发布按钮之后 将文本和图片/视频上传到后端服务器

// 点击发布按钮
    regSave() {
      console.log("this.fileMe", this.fileMe);
      
      // 通过FormData将文件转成二进制数据
      const forms = new FormData();
      forms.append("uid", sessionStorage.getItem("uid")); //  uid
      forms.append("urlList", [this.fileMe[0].Mysrc]); // 添加 键和值
      forms.append("descr", this.msg); // 获取上传图片描述
      // forms.append("date", this.fileDate); // 获取上传图片上传时间
      forms.append("type", this.fileMe[0].type); // 获取上传图片类型
      axios({
        url: "/bili/dynamic/addDynamic",
        method: "post",
        data: forms, //URLSearchParams类型
        headers: {
          "Content-Type": "multipart/form-data",
        }, //php 默认要求传递请求头
      })
        .then((res) => {
          // if (res.data.status === 200) {
          console.log(res.data);
        })
        .catch((e) => {
          console.log("服务器出错了", e);
        });
        setTimeout(() => {
          // 发布成功 跳转到动态页面
          this.$router.push('/Move/Space/SpaceMy');
        }, 2000);
    },

全部代码：