ant design自定义上传文件或图片

169 阅读1分钟
一、axios如何上传FormData

要点:
1、把用户上传的文件变成文件流(file)
2、axios 请求头中Content-Type 变为 multipart/form-data
向 FormData 对象中添加新的属性值,把后台要的参数全部传入

function upLoads(config) {
  let formData = new FormData();
  formData.append('courseFile', state.value.file);
  formData.append('status',1); // 后台要的状态

  UploadExcel(formData)
    .then(res => {
      if (res.data.code === 200) {
       message.success(err.data.msg);
      }
    })
    .catch(err => {
      message.error(err.data.msg);
    });
}

上传完成后与普通post请求的区别

image.png

二、ant自定义上传文件customRequest

customRequest里面有一个data参数,data包含了对file文件上传状态的操作
dom代码

<a-upload-dragger
     v-model:fileList="fileList"
     name="file"
     :multiple="true"
     action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
     :max-count="1"
     accept=".xlsx, .xls"
     :custom-request="handleChange"
     :progress="progress"
     @drop="handleDrop"
 >
    <div class="upload-icon">
        <img src="../../assets/images/icon_upload_plus.png" />
    </div>
    <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
    <p class="ant-upload-hint"> 最多可上传1个文件,文件大小不能超过3M</p>
 </a-upload-dragger>

image.png

function handleChange(data) {
  let fileName = data.file.name;
  state.value.file = data.file;
  //
  const isXlsx =
    data.file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    data.file.type === 'application/vnd.ms-excel';
  const isLt3M = data.file.size / 1024 / 1024 > 3;
  if (!isXlsx) {
    message.error('请上传表格文件');
    fileLists.value = [];
    return;
  } else if (isLt3M) {
    message.error('文件大小超出上传限制');
    fileLists.value = [];
    return;
  } else {
    console.log('成功');
    fileLists.value = [data.file];
    console.log(333, fileLists.value);
    let config = {
      timeout: 12000,
      onUploadProgress: Progress => {
        let percents = Math.round(Progress.loaded / Progress.total) * 100;
        state.value.percents = percents;
        // 更新进度条
        // onProgress({ percent: percents }, data);
        //   onSuccess({ percent: percents }, data);
      }
    };
    upLoads(config);
  }
}

image.png 上传的时候通过loaded和total计算出进度,自定义上传的onProgress同步进度到ant组件 看打印:

image.png 上传文件部分:

// 上传
function upLoads(config) {
  console.log(32323, state.value.file, config);
  let formData = new FormData();
  formData.append('courseFile', state.value.file);
  formData.append('status',1);

  UploadExcel(formData, config)
    .then(res => {
      if (res.data.code === 200) {
        message.success(err.data.msg);
      } else {
        message.error(err.data.msg);
        state.value.strokeColor = '#82BC3F'; // 进度条颜色
        state.value.dataSource = res.data.data; // 数据
      }
    })
    .catch(err => {
      console.log(err);
      state.value.percents = 90; // 上传失败手动写的进度为90%
      state.value.strokeColor = '#FF5252'; // 进度条颜色
      message.error(err.data.msg);
    });
}

image.png axios上传文件请求封装

image.png 最终效果图

image.png

三、华为云上传图片
  1. 下载对应的sdk npm install esdk-obs-browserjs --save-dev
  2. 创建公共文件(utils/uploads.js)和定义方法类,如下

image.png image.png 3.使用 如下

image.png

image.png 效果如下

image.png