vue项目下自己封装上传文件功能

axios因为统一封装过，通过这个库上传文件也行，但是封装的地方修改不太容易，遂另起炉灶。

看代码：

// utils/uploadFile.js
const baseUrlConfig = {
    'development': 'http://localhost:8089/v1',
    'production': 'http://47.96.112.186/v1'
 
}
const env = process.env.NODE_ENV
//单个上传文件，接受一个获取到的文件参数
function upload(path, file) {
    return new Promise((resolve, reject) => {
        if (!file) {
            return alert("你还未选择文件");
        }
        var formData = new FormData();
        // 接口只接受一个文件，取第一个文件即可
        formData.append("image", file);
        // 我们的接口需要这2个参数
        formData.append("siteId", 1);
        formData.append("session", localStorage.getItem("sessionId"));
        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest();
        // 5. 监听事件
        xhr.onreadystatechange = function () {
            console.log(234);
            if (xhr.readyState === 4 && xhr.status === 200) {
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                if (result.status == 0) {
                    // 上传成功：显示图片
                    resolve(result.data)
                } else {
                    // 上传失败
                    reject(result.reason)
                }
            }
        };
 
        // 2. 调用 open 函数
        xhr.open("POST", baseUrlConfig[env] + path);
        // 4. 调用 send 函数
        xhr.send(formData);
    })
}
 
export default upload;

<template>
  <a-card>
    <a-space class="operator">每天上传的图片不要超过5张</a-space>
    <div class="box">
      <!-- 1. 文件选择框 -->
      <input type="file" id="file" />
      <!-- 2. 上传文件的按钮 -->
      <button id="btnUpload" @click="btnUpload">上传文件</button>
      <div class="img-box" v-if="imgUrl">
        <p>图片地址：{{ imgUrl }}</p>
        <!-- 3. img 标签，来显示上传成功以后的图片 -->
        <img :src="imgUrl" alt="等待上传图片" id="img" width="800" />
      </div>
    </div>
  </a-card>
</template>
 
<script>
import dateFormat from "@/utils/dateFormat.js";
import upload from "@/utils/uploadFile.js";
export default {
  data() {
    return {
      imgUrl: "",
    };
  },
  filters: {
    dateFormat(value) {
      return dateFormat(value, "yyyy-MM-dd hh:mm:ss");
    },
  },
  created() {},
  activated() {},
  mounted() {},
  methods: {
    btnUpload() {
      let file = document.querySelector("#file").files[0];
      upload("/admin/uploadFile", file).then((res) => {
        this.imgUrl = res;
      });
    },
  },
};
</script>
 
<style lang="less" scoped>
.box {
  height: 500px;
  padding: 20px 0 0;
  .img-box {
    margin-top: 30px;
    text-align: center;
    img {
      width: auto;
      height: 400px;
    }
  }
}
</style>