vue+el-upload（封装华为云OBS上传文件）前端直传-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+el-upload（封装华为云OBS上传文件）前端直传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天有个需求，把项目中上传文件从后台服务端搬到华为云OBS上，找了好多资料发现好多博主并没写用什么调用，而是把华为云文档搬过来，特封装了一个完成组件复用，下面话不多说直接上代码

注释：代码中###是需要填写自己东西的

<template>
  <div class="upload-file">
<el-upload
  multiple
  action
  :on-change="fileChange"
  :before-upload="handleBeforeUpload"
  :file-list="fileList"
  :limit="limit"
  :on-exceed="handleExceed"
  :show-file-list="false"
  :headers="headers"
  class="upload-file-uploader"
  ref="upload"
>
  <!-- 上传按钮 -->
  <el-button size="mini" type="primary">选取文件</el-button>
  <!-- 上传提示 -->
  <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
    <template v-if="fileSize">
      大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
    </template>
    <template v-if="fileType">
      格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
    </template>
    的文件
  </div>
</el-upload>

<!-- 文件列表 -->
<transition-group
  class="upload-file-list el-upload-list el-upload-list--text"
  name="el-fade-in-linear"
  tag="ul"
>
  <li
    :key="file.url"
    class="el-upload-list__item ele-upload-list__item-content"
    v-for="(file, index) in fileList"
  >
    <el-link :href="file.url" :underline="false" target="_blank">
      <span class="el-icon-document"> {{ file.name }} </span>
    </el-link>
    <div class="ele-upload-list__item-content-action">
      <el-link :underline="false" @click="handleDelete(index)" type="danger"
        >删除</el-link
      >
    </div>
  </li>
</transition-group>
  </div>
</template>

<script>
import { uuid } from "vue-uuid";
import { getToken } from "@/utils/auth";
import ObsClient from "esdk-obs-browserjs/src/obs";
export default {
  name: "FileUpload",
  props: {
// 值
value: [String, Object, Array],
// 数量限制
limit: {
  type: Number,
  default: 5,
},
// 大小限制(MB)
fileSize: {
  type: Number,
  default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
  type: Array,
  default: () => ["doc", "xls", "ppt", "txt", "pdf"],
    },
// 是否显示提示
isShowTip: {
  type: Boolean,
  default: true,
},
  },
  data() {
return {
  number: 0,
  uploadList: [],

  headers: {
    Authorization: "Bearer " + getToken(),
  },
  fileList: [],
  file: undefined,
};
  },
  watch: {
value: {
  handler(val) {
    if (val) {
      let temp = 1;
      // 首先将值转为数组
      const list = Array.isArray(val) ? val : this.value.split(",");
      // 然后将数组转为对象数组
      this.fileList = list.map((item) => {
        if (typeof item === "string") {
          item = { name: item, url: item };
        }
        item.uid = item.uid || new Date().getTime() + temp++;
        return item;
      });
    } else {
      this.fileList = [];
      return [];
    }
  },
  deep: true,
  immediate: true,
},
  },
  computed: {
// 是否显示提示
showTip() {
  return this.isShowTip && (this.fileType || this.fileSize);
},
  },
  methods: {
uploadObs() {},
fileChange(file, fileList) {
  this.file = file;
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
  console.log(file);
  let that = this;
  // 校检文件类型
  if (this.fileType) {
    let fileExtension = "";
    if (file.name.lastIndexOf(".") > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
    }
    const isTypeOk = this.fileType.some((type) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
    if (!isTypeOk) {
      this.$modal.msgError(
        `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
      );
      return false;
    }
  }
  // 校检文件大小
  if (this.fileSize) {
    const isLt = file.size / 1024 / 1024 < this.fileSize;
    if (!isLt) {
      this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
      return false;
    }
  }
  this.$modal.loading("正在上传文件，请稍候...");
  let uuids = uuid.v1() + Date.now();
  // 创建ObsClient实例
  var obsClient = new ObsClient({
    access_key_id: "###########", // 你的ak
    secret_access_key: "#########", // 你的sk
    server: "https://####", // 你的endPoint  记得加入https://
  });
  obsClient.putObject(
    {
      Bucket: "####", // 桶名
      Key: uuids, // 文件名    此处用的是uuid+ 时间戳

      SourceFile: file, //流文件
    },
    function (err, result) {
      if (err) {
        console.error("Error-->" + err);
        that.handleUploadError();
      } else {
        console.log("Status-->" + result.CommonMsg.Status);
        console.log(12312312);
        that.uploadList.push({
          name: `${uuids}`, //名字自取 这里我用了uuid + 时间戳
          url: `https://ye-shuo-ddb.obs.cn-east-3.myhuaweicloud.com/${uuids}`,  // 因为访问路径OBS没有给你返回需要自行拼接   拼接格式： https:// +  桶名 + endPoint  +  /  + 上传的文件路径
        });

        that.fileList = that.fileList.concat(that.uploadList);
        that.uploadList = [];
        that.number = 0;
        that.$emit("input", that.listToString(that.fileList));
        that.$modal.closeLoading();
        console.log(that.fileList);
      }
    }
  );

  this.number++;

  return true;
},
// 文件个数超出
handleExceed() {
  this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError(err) {
  console.log(err);
  this.$modal.msgError("上传图片失败，请重试");
  this.$modal.closeLoading();
},

// 删除文件
handleDelete(index) {
  this.fileList.splice(index, 1);
  this.$emit("input", this.listToString(this.fileList));
},
// 获取文件名称
getFileName(name) {
  return name;
},
// 对象转成指定字符串分隔
listToString(list, separator) {
  let strs = "";
  separator = separator || ",";
  for (let i in list) {
    strs += list[i].url + separator;
  }
  return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>