vue+antd实现手动上传文件，原生实现手动上传文件

需求： 选择文件后单机确定按钮实现上传

  这里使用的是 antdesignvue upload 组件

HTML代码

 accept 用于限定文件类型 ， 此处限定 进允许 xls xlsx文件

file-list 为上传的文件列表

remove 为 删除文件事件

before-upload  上传之前的事件 

      <a-upload-dragger
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :file-list="fileList"
        :remove="handleRemove"
        :before-upload="beforeUpload">
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">单击此处选择文件上传</p>
      </a-upload-dragger>

remove事件就是 清空文件列表的值

const handleRemove = (file) => {
  fileList.value = [];
};

before-upload事件 获取上传的文件 和 类型限定

const beforeUpload = (file) => {
  // 判断文件类型
  const isJpgOrPng =
    file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel';
  if (!isJpgOrPng) {
    message.error('仅允许 xls 或  xlsx 文件类型!');
    return;
  }
 // 获取上传的文件，仅单个文件
  fileList.value = [file];
  return false;
};

解释formData用法 ， 上传文件会用到

例如 ： 该接口需要的参数如下，使用formData上传文件时 不光file文件要添加到formData中，该接口所有需要的参数都要添加到 formData中

 将所有的值添加到formData中

发送请求上传文件

 
  try {
    const uploadResult = await upLoadBypaltForm(sRValue.value, formData);
    if (uploadResult.code == 200) {
      message.success('文件上传成功！！！');
    }
    if (uploadResult.code == 400) {
      message.error(`${uploadResult.message}`);
    }
  } catch (error) {
    console.log(error);
    message.error('文件上传失败！');
  }

uploadBypaltForm 为上传文件请求 

export const upLoadBypaltForm = (platform, data) => {
  return request({
    url: `/account/${platform}/import/`,
    method: 'post',
    data
  });
};

原生与组件库的区别就是 获取文件的方式  

<input
        type="file"
        id=""
        value=""
        name="saveFile"
        @change="tirggerFile($event)"
      />

在 change 事件中 获取上传的文件 ， 获取到文件后的操作和组件库后续操作一直 ， 使用formdata添加文件上传即可

let file = event.target.files