ueditor富文本编辑器如何实现跨域上传图片


当前第2页 返回上一页

2.修改完访问路径还需要修改ueditor/php/Uploader.class.php文件,找到 upFile() 方法,此方法就是demo中上传文件的主处理方法,修改这个上传方法比做什么代理页面、加js什么的更简单也更好理解,就算多个页面引入也没得问题:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

private function upFile()

  {

      $file = $this->file = $_FILES[$this->fileField];

      if (!$file) {

          $this->stateInfo = $this->getStateInfo("ERROR_FILE_NOT_FOUND");

          return;

      }

      if ($this->file['error']) {

          $this->stateInfo = $this->getStateInfo($file['error']);

          return;

      } else if (!file_exists($file['tmp_name'])) {

          $this->stateInfo = $this->getStateInfo("ERROR_TMP_FILE_NOT_FOUND");

          return;

      } else if (!is_uploaded_file($file['tmp_name'])) {

          $this->stateInfo = $this->getStateInfo("ERROR_TMPFILE");

          return;

      }

 

      $this->oriName = $file['name'];

      $this->fileSize = $file['size'];

      $this->fileType = $this->getFileExt();

      $this->fullName = $this->getFullName();

      $this->filePath = $this->getFilePath();

      $this->fileName = $this->getFileName();

      $dirname = dirname($this->filePath);

 

      //检查文件大小是否超出限制

      if (!$this->checkSize()) {

          $this->stateInfo = $this->getStateInfo("ERROR_SIZE_EXCEED");

          return;

      }

 

      //检查是否不允许的文件格式

      if (!$this->checkType()) {

          $this->stateInfo = $this->getStateInfo("ERROR_TYPE_NOT_ALLOWED");

          return;

      }

 

      //创建目录失败

      if (!file_exists($dirname) && !mkdir($dirname, 0777, true)) {

          $this->stateInfo = $this->getStateInfo("ERROR_CREATE_DIR");

          return;

      } else if (!is_writeable($dirname)) {

          $this->stateInfo = $this->getStateInfo("ERROR_DIR_NOT_WRITEABLE");

          return;

      }

 

      //移动文件

      if (!(move_uploaded_file($file["tmp_name"], $this->filePath) && file_exists($this->filePath))) { //移动失败

          $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");

      } else { //移动成功

          $this->stateInfo = $this->stateMap[0];

      }

   /**

    *此处上面的代码都是demo内的源代码不需要改,下面才是我加上的需要敲黑板划重点的地方,说一下思路,上面的代码会在本地生成上传的图片内容,然后我们就可以拿到上传的文件的全路径,

    *拿到全路径再调用事先封装好的上传接口上传到图片服务器即可,由于第一步配置了图片服务器的域名,所以最后返回给编辑器窗口的图片路径已经是带域名的全路径啦

    */

   $imgPath = '@'.$dirname.'/'.$this->fileName;//获取生成的本地文件完整路径

     

   //发送请求的参数

   $data = [

          'myFile'=>$imgPath,

          'imgType'=>4

      ];

   $serverUrl = 'http://img.com/api/image.action'; //请求地址

      $ch = curl_init(); //初始化

      curl_setopt($ch, CURLOPT_URL, $serverUrl);  

      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_POST, true);

      //https协议需要以下两行,否则请求不成功

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);

      curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

      //post方法所需要的参数

      curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

      curl_setopt($ch, CURLOPT_HTTPHEADER, array());

      $result = curl_exec($ch);

      curl_close($ch);

 

      $result = json_decode($result,true); //将接口返回的json数据转为数组

      $this->fullName = $result['imgUrlNormal']; //重置要返回给编辑器窗口的图片路径,这一步可以让图片在编辑器内正常显示图片

  }

3.改完这两个地方之后,再自己写一个上传图片的接口啦,将上面的请求地址缓存你的接口地址,比较简单也有一堆的例子,我这里就不贴出来了,这样三步下来不出意外已经可以跨域上传图片了,无论是单图还是多图都可以,既简单好理解又方便!!!

相关教程:HTML视频教程

以上就是ueditor富文本编辑器如何实现跨域上传图片的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

集成ueditor富文本编辑器的方法

ueditor富文本编辑器如何实现跨域上传图片

js如何获取ueditor富文本编辑器中的图片地址

vue项目中如何使用ueditor

html怎么插入百度富文本编辑器ueditor

更多相关阅读请进入《ueditor》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...