基于Vue使用Arco Design组件封装一个七牛云上传图片的函数

博主通过学习七牛云官方文档，封装了一个七牛云上传图片的工具函数，方便项目中上传图片的使用。如果有小伙伴想要学习可根据七牛云官方地址https://developer.qiniu.com/kodo/1283/javascript，上传组件使用的是Arco Design库里面的uploa组件具体地址可参考https://arco.design/vue/component/upload

效果展示

下面为上传效果，可以设置多张图片上传，也可以限制上传图片的数量，并实现了上传进度条显示。话不多说，请看图：

代码如下

js代码

export const customRequest = (option) => {
  const {
    action, // 后台上传文件接口
    name, // 上传文件对应后台字段名
    headers, // 请求头信息 {}
    data, // {} 给后台除了文件之外的其他数据
    fileItem, // 上传文件元素
    onProgress,
    onError,
    onSuccess,
  } = option;

  const xhr = new XMLHttpRequest();
  if (xhr.upload) {
    xhr.upload.onprogress = function (event) {
      let percent;
      if (event.total > 0) {
        // 0 ~ 1
        percent = event.loaded / event.total;
      }
      onProgress(percent, event);
    };
  }
  xhr.onerror = function error(e) {
    onError(e);
  };
  xhr.onload = function onload() {
    if (xhr.status < 200 || xhr.status >= 300) {
      return onError(xhr.responseText);
    }
    onSuccess(xhr.response);
  };

  const formData = new FormData();
  // formData里的数据 一定是名-值对集合
  formData.append(name, fileItem.file);
  // 将data参数中的数据 添加 到formData
  for (let prop in data) {
    formData.append(prop, data[prop]);
  }

  xhr.open('post', action);
  // 设置请求头--一定放在open方法之后
  for (let h in headers) {
    // 添加token头
    xhr.setRequestHeader(h, headers[h]);
  }
  xhr.send(formData);

  return {
    abort() {
      xhr.abort();
    },
  };
};

html代码

// action中的地址为图片上传的地址
<a-upload
              action="qiniu.region.z1" 
              :custom-request="customRequest"
          />
    

代码仅作参考作用，因为每个人的使用需求不同，本文upload组件中仅实现了基本功能。具体实现功能可参考组件中的文档。