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>