publish.vue

<template>
  <div class="publish">
    <van-cell-group class="content">
      <van-field
        v-model="message"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="这一刻的想法..."
        show-word-limit
      />
      <van-uploader
        class="add"
        multiple
        v-model="fileList"
        :after-read="afterRead"
      >
        <img
          class="add-img"
          src="@/assets/images/editAdd.png"
          alt="添加图片和视频"
        />
      </van-uploader>
    </van-cell-group>
    <div class="btn">
      <van-button type="primary" size="large" @click="onPublish"
        >发布</van-button
      >
    </div>
  </div>
</template>

<script>
import { uploadImage } from "@/api/infomation";

export default {
  name: "publish",
  data() {
    return {
      message: "",
      fileShow: false,
      fileList: []
    };
  },
  methods: {
    onPublish() {
      console.log("发布===文字", this.message);
      console.log("发布===文件", this.fileList);
      const fd = new FormData();
      this.fileList.forEach(file => {
        fd.append("files", file.file);
      });
      fd.append("zxField", this.message);
      fd.append("userId", JSON.parse(localStorage.getItem("user")).userId);
      uploadImage(fd).then();
    },
    openPopup() {
      this.fileShow = true;
    },
    afterRead(file) {
      console.log(file);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  height: 350px;
  margin-top: 10px;
  background-color: #fff;

  .van-field {
    height: 230px;
  }

  ::v-deep .van-field__word-limit {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .add {
    position: absolute;
    left: 10px;
    bottom: 20px;
    .add-img {
      width: 88px;
      height: 88px;
    }
  }
}
.btn {
  padding: 10px 16px;
}
</style>