nsgk_mobile/src/components/uploader/uploader.vue

<template>
  <div class="van-ov-upload-root">
    <van-uploader ref="van_uploader"
                  capture="camera"
                  v-model="value"
                  :max-count="maxCount"
                  preview-size="65px"
                  @delete="deleteFile"
                  @oversize="uploadFileOverSize"
                  :loop="false" max-size="5242880">
      <img class="el-ov-uploader-file" slot="default" @click.stop="showActionSheet($event)"
           src="../../assets/common/icon_upload.png" width="72px"
           alt="">
    </van-uploader>
  </div>
</template>

<script>
  import {Toast} from "vant";
  import {getFileInfoList} from "@/api/common";

  export default {
    name: "van-ov-uploader",
    props: {
      value: {
        default: Array
      },
      pictureid: {
        default: String
      },
      maxCount: {
        default: 6
      }
    },
    data() {
      return {
        deleteFileIds: [],
        pictureList: []
      }
    },
    watch: {
      value: function (val) {
        this.deleteFileInput()
      }
    },
    mounted() {
      this.deleteFileInput()
    }, beforeUpdate() {
      this.deleteFileInput()
    },
    updated() {
      this.deleteFileInput()
    },
    methods: {
      deleteFileInput() {
        document.getElementsByClassName('van-uploader__input')[0].remove()
      },
      showActionSheet(event) {
        event.preventDefault();
        let that = this
        uexWindow.actionSheet({
          title: "",
          cancel: "取消",
          buttons: "拍照上传,本地上传"
        }, function (index) {
          if (index == 0) {
            try {
              uexCamera.open(1, '', function (data) {
                let uploader = uexUploaderMgr.create({
                  url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
                  type: 1
                });
                if (!uploader) {
                  alert("创建失败!");
                }
                uexUploaderMgr.uploadFile(uploader, data, "file", 1, 640, function (packageSize, percent, responseString, status) {
                  if (status == 1) {
                    let data = {
                      parentId: that.pictureid,
                    }
                    this.pictureList = []
                    getFileInfoList(data).then((resp) => {
                      if (resp.code == 1 && resp.data.rows.length != 0) {
                        let item = resp.data.rows[resp.data.rows.length - 1]
                        that.value.push({
                          url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
                          isImage: true
                        })
                        that.deleteFileInput()
                      }
                    }).catch()
                  } else if (status == 2) {
                    alert("上传失败");
                  }
                  that.deleteFileInput()
                });
              })
            } catch (e) {
              alert(JSON.stringify(e))
            }

          } else if (index == 1) {
            //打开多图片选择器
            var data = {
              min: 1,
              max: 1,
              quality: 1,
              detailedInfo: true,
              // style: 1,
            };
            uexImage.openPicker(data, function (error, info) {
              if (error == -1) {
              } else if (error == 0) {
                if (info.detailedImageInfo) {
                  info.detailedImageInfo.map(async (item) => {
                    var uploader = uexUploaderMgr.create({
                      url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
                      type: 1
                    });
                    if (!uploader) {
                      alert("创建失败!");
                    }
                    uexUploaderMgr.uploadFile(uploader, item.localPath, "file", 0, 640, function (packageSize, percent, responseString, status) {
                      if (status == 1) {
                        let data = {
                          parentId: that.pictureid,
                        }
                        this.pictureList = []
                        getFileInfoList(data).then((resp) => {
                          if (resp.code == 1 && resp.data.rows.length != 0) {
                            let item = resp.data.rows[resp.data.rows.length - 1]
                            that.value.push({
                              url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
                              isImage: true
                            })
                          }
                          that.deleteFileInput()
                        })
                      }
                    })
                  })
                }
              }
            });
            that.deleteFileInput()
          }
        });
      },

      deleteFile(obj) {
        let url = obj.url
        let fileId = url.substr(url.lastIndexOf("fileId=") + 7)
        this.deleteFileIds.push(fileId)
      }
      ,
      uploadFileOverSize(obj) {
        Toast("图片大小超出限制，图片大小应在 5MB 之内");
      }
      ,
    }
  }
</script>

<style lang="scss">
  .van-ov-upload-root {
    .van-uploader__input-wrapper {
      width: 72px;
      height: 72px;

    }

    .el-ov-uploader-file {
      position: absolute;
      top: 0;
      left: 0;
      width: 72px;
      height: 72px;
      overflow: hidden;
      cursor: pointer;
    }
  }

</style>
————————————————
版权声明：本文为CSDN博主「bydongxin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bydongxin/article/details/108367086