appWareHouse/components/file-upload.vue

<template>
  <uni-file-picker
    :limit="limit"
    v-model="filesValue"
    mode="grid"
    file-mediatype="all"
    :disabled="disabled"
    @select="select"
    @progress="progress"
    @success="success"
    @fail="fail"
    :del-icon="!disabled"
  >
    <uni-button v-if="disabled"></uni-button>
  </uni-file-picker>
</template>
 
<script>
import { baseUrl } from "@/config";
 
export default {
  props: {
    value: {
      default: "",
    },
    // 上传数
    limit: {
      default: "9",
    },
    disabled: {
      default: false,
    },
  },
  data() {
    return {
      filesValue: [],
    };
  },
  watch: {
    value: {
      handler(val, oval) {
        if (val && val != oval) {
          this.filesValue = [];
          let arr = val.split(",");
 
          if (arr) {
            arr.forEach((item) => {
              let name = item.split("/").pop(); // 文件名
              let extname = name.split(".")[1]; // 后缀名
              this.filesValue.push({
                url: item,
                name,
                extname,
              });
            });
          }
        }
      },
      deep: true, //是否深度监听
      immediate: true, //是否监听初始
    },
    filesValue: {
      handler(val, oval) {
        if (val.length > 0) {
          let arr = [];
          val.forEach((item) => {
            arr.push(item.url);
          });
          const str = arr.join(",");
          this.$emit("input", str);
        } else {
          this.$emit("input", "");
        }
      },
      deep: true, //是否深度监听
      immediate: true, //是否监听初始
    },
  },
  methods: {
    updata(filePath) {
      const that = this;
      // const accessToken = uni.getStorageSync("App-Token") || null; // 获取token
      uni.uploadFile({
        url: baseUrl + "api/App/CDN/UploadOffice", // 上传路径
        filePath: filePath,
        name: "file",
        header: {
          // Authorization: `Bearer ${accessToken}`,
        },
        // HTTP 请求中其他额外的 form data
        formData: {
        },
        success(res) {
          // 上传成功，返回值是后端返回的值，组件以json格式获取到值，所以需要转换成对象
          let response = JSON.parse(res.data);
          // console.log("=======上传文件完成======>", response);
          if (response.data.url != undefined) {
            // 判断上传成功与否，也可以通过状态码进行判断
            // 把后端返回的上传后的文件路径组装成字符串，传递给父组件
            let str;
            if (that.value) {
              str = that.value + "," + response.data.url;
            } else {
              str = response.data.url;
            }
            that.$emit("input", str); // 同步给父组件
            uni.showToast({
              title: "上传文件成功",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "上传文件失败,请重试!",
              icon: "none",
              duration: 2000,
            });
          }
        },
        fail(err) {
          uni.showToast({
            title: "上传文件失败,请重试!",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    // 获取上传状态
    select(e) {
      console.log("选择文件：", e);
      e.tempFilePaths.forEach((item) => {
        this.updata(item);
      });
    },
    // 获取上传进度
    progress(e) {
      console.log("上传进度：", e);
    },
 
    // 上传成功
    success(e) {
      console.log("上传成功");
    },
 
    // 上传失败
    fail(e) {
      console.log("上传失败：", e);
    },
  },
};
</script>
 
<style lang="scss" scoped></style>