Antd upload customRequest 自定义上传,使用本地图片地址展示

119 阅读1分钟

因为这个项目上传后的图片不能直接访问,必须调接口获取Blob来展示,所以上传时用本地图片地址展示比较方便,

// 读取本地文件
const readDataURL = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsDataURL(file);
  });
};
// 自定已上传函数
async function handleUpload(e) {
  // 使用FileReader读取文件
  let r = await readDataURL(e.file);

  const fd = new FormData();
  fd.append("file", e.file);
  let res = await uploadApi(fd);
  if (res) {
    let o = {
      OID: res.photoUrlId,
      src: r,// 这个是自定义的图片预览用到
    };

    workPic.value.push(o);
    //console.log("上传成功", fileList);
    e.onSuccess(res, e);
  } else {
    //message.error(res.message);
    //e.onError(res.message);
  }

}