Vue Vant文件上传进阶版

Vue Vant文件上传进阶版

按照当前图片数保存数据，可以任意修改，当访问有数据时，实时显示

<template>
  <div class="imglist">
    <div class="h2">文件上传</div>
    <div class="upload">
      <van-uploader
        v-model="fileList"
        multiple
        capture="camera"
        :after-read="afterRead"
        @delete="deleturl"
      >
        <div class="imgsrc">
          <span class="icons icon-zhaoxiangji" />
        </div>
      </van-uploader>
    </div>
  </div>
</template>

<script>
//上传文件路径
import { uploadFile } from "@/api/upload";
export default {
  name: "uploaderimg",
  data() {
    return {
    //文件数组
    imgurl:"",
      value: "",
      fileList: []
    };
  },
  methods: {
  //加载
    loadData() {
      if (this.question.result) {     
      //图片保存的数据是按照1.jpg,2.png格式保存的
        let imgs = this.question.result.split(",");
        for (let index = 0; index < imgs.length; index++) {
        this.fileList.push({ url: "", image: "" });
          this.fileList[index].url = this.viewImgs(imgs[index]);
          this.fileList[index].image = imgs[index];
        }
      }
    },
    //读取文件完毕后的事件
    afterRead(file) {
         uploadFile(file.file).then(({ data }) => {
        this.fileList[this.fileList.length - 1] = { url: "" };
        //图片显示
        this.fileList[this.fileList.length - 1].url = this.viewImgs(data);
        //图片名
        this.fileList[this.fileList.length - 1].image = data;
        this.updateData();
      });
    },
    //文件删除之后的事件
    deleturl() {
      this.updateData();
    },
    updateData() {
      const list = [];
      for (let index = 0; index < this.fileList.length; index++) {
        list[index] = this.fileList[index].image ;
      }
      //把数组用,隔开变为字符串
      this.imgurl= list.join();
      //输出
      window.console.log(this.imgurl)
    }
  },
  mounted() {
    this.loadData();
  },
  computed: {
  //文件格式
    viewImgs() {
      return function(img) {
        return "../../../public/images/"+ img ；
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.imglist {
  width: calc(100% - 50px);
  padding: 25px;
  background: white;
}
.h2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(113, 113, 113, 1);
  padding-bottom: 15px;
  text-align: left;
}
.imgsrc {
  margin-right: 10px;
  background: #eeeeee;
  width: 79px;
  display: flex;
  height: 57px;
  align-items: center;
  justify-content: center;
  align-content: center;
  border-radius: 3px;
}
.icon-zhaoxiangji {
  color: #cfcfcf !important;
  display: inline-block;
  font-size: 32px !important;
}
.upload {
  background: white;
  text-align: left;
}
/deep/.van-image {
  width: 79px;
  height: 57px;
}
/deep/.van-popup__close-icon--bottom-left {
  position: fixed;
}
/deep/.van-uploader__preview {
  margin: 0 10px 0px 0;
}
</style>

了解更多Vant组件的知识