VUE上传图片跨域

Posted 2023-04-25

参考技术A 上传组件用的elementui - upload,由于上传图片需要用户的登陆信息,所以前端请求头添加了一个token ,属于自定义header
跨域时浏览器发送options预检请求,会带上自定义的请求头字段,用来判断该字段是否被服务端支持.

php 之跨域上传图片

因为要将所有上传的图片上传到一台独立的图片服务器上面，js上传时存在跨域问题，网上找到这种，通过php curl方式，将图片重新发送到另外一台服务器上保存，并返回图片路径！


这种方式存在一定问题：
1，上传大图片时，比如2M，需要将图片首先传到服务器，然后再传到图片服务器，中间需要4M的传输，加大了上传时间！
2，从服务器转到图片服务器的时候因为没有保存，传输使用的是临时文件，考虑到图片格式的限制，将图片进行了重命名，传输之后对该图片进行删除，碰到一些未知问题是可能导致图片删除失败，增加了服务器存储空间！

代码如下：

 

[html] view plain copy

 

1. public function upload($files = ‘‘){  
2.     if($files === ‘‘){  
3.         $files  =   $_FILES;  
4.     }  
5.   
6.     if(empty($files)){  
7.         $this->error = ‘没有上传的文件！‘;  
8.         return false;  
9.     }  
10.   
11.     $ext = pathinfo(strip_tags($files[‘file‘][‘name‘]), PATHINFO_EXTENSION);  
12.   
13.     $new_name = dirname($files[‘file‘][‘tmp_name‘]).‘/‘.date("YmdHis").rand(0,99).".".$ext;  
14.   
15.     rename($files[‘file‘][‘tmp_name‘],$new_name);  
16.   
17.     $fields[‘img‘] = ‘@‘.$new_name;  
18.   
19.     //初始化curl          
20.     $ch = curl_init();  
21.   
22.     curl_setopt($ch,CURLOPT_URL, $this->url);  
23.   
24.     curl_setopt($ch, CURLOPT_POST, 1 );  
25.     curl_setopt($ch, CURLOPT_POSTFIELDS, $fields );  
26.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);  
27.   
28.     //运行curl  
29.     $r = curl_exec($ch);  
30.     curl_close($ch);  
31.   
32.     @unlink($new_name);  
33.   
34.     if($r){  
35.         return json_decode($r,true);  
36.     }else{  
37.         $this->error = "请求失败";  
38.         return false;  
39.     }  
40. }