最近上传的时候遇到一个跨域的问题,后来发现前端调用的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、开辟一个路径允许跨域就可以了
网友评论