美文网首页
前端使用antdesign导出插件跨域问题

前端使用antdesign导出插件跨域问题

作者: 年轻人多学点 | 来源:发表于2023-12-17 14:28 被阅读0次

    最近上传的时候遇到一个跨域的问题,后来发现前端调用的upload插件时,没配置action路径,所以会默认调用当前的项目根路径,而如果这个根路径没做跨域,那放到服务器上会出现问题,可以跟后端运维约定一个路径

    image.png

    解决办法:

    1、使用beforeUpload属性

    <Upload
      key="upload"
      beforeUpload={beforeUpload}
      className={styles.upload}
      accept=".png, .jpg, .jpeg, .bmp, mp4"
      listType="picture-card"
      showUploadList={false}
    ></Upload>;
    

    return false阻止默认事件,自己取出base64进行操作

    //上传资源事件重写
    const beforeUpload = (file) => {
      getBase64(file, (imageUrl) => {
        /** */
      }); return false;
    }; //取图片base64
    const getBase64 = (img, callback) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => callback(reader.result));
      reader.readAsDataURL(img);
    };
    

    2、开辟一个路径允许跨域就可以了

    相关文章

      网友评论

          本文标题:前端使用antdesign导出插件跨域问题

          本文链接:https://www.haomeiwen.com/subject/zvhogdtx.html