欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片

這篇文章主要介紹了ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、微信平臺(tái)小程序開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

在使用百度富文本編輯器上傳圖片的過(guò)程中,如果是有一臺(tái)單獨(dú)的圖片服務(wù)器就需要將上傳的圖片放到圖片服務(wù)器,比如在a.com的編輯器中上傳圖片,圖片要保存到img.com,這就涉及到跨域上傳圖片,而在ueditor官方文檔中說(shuō)不支持單圖上傳的跨域,網(wǎng)上查了一下各種花里胡哨,一頓操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,沒搞清楚什么是跨域就敢定義為跨域,仔細(xì)研究了一下ueditor的demo文件,想出了一個(gè)折中辦法,很簡(jiǎn)單只需要修改demo中兩個(gè)地方的代碼外加寫一個(gè)上傳接口即可:

首先引入頁(yè)面ueditor編輯器,這里不多說(shuō),可以參考之前的一篇文章:Html怎么插入百度富文本編輯器ueditor ,這里默認(rèn)你已經(jīng)實(shí)現(xiàn)了ueditor的引入如下圖:

ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片

1.此時(shí)你上傳的圖片都是保存在本地的,如果想要跨域傳到其它服務(wù)器，需要在ueditor/php/config.json配置文件中的圖片配置項(xiàng)imageUrlPrefix加上域名,這樣你在上傳完圖片之后返回給你的就是全路徑的圖片,在任何地方都可以顯示,我這里以客戶端a.com通過(guò)編輯器上傳圖片到img.com上,所以imageUrlPrefix配置為http://img.com,注意必須是帶http://的全域名:

ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片

2.修改完訪問(wèn)路徑還需要修改ueditor/php/Uploader.class.php文件,找到 upFile() 方法,此方法就是demo中上傳文件的主處理方法,修改這個(gè)上傳方法比做什么代理頁(yè)面、加js什么的更簡(jiǎn)單也更好理解,就算多個(gè)頁(yè)面引入也沒得問(wèn)題:

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;

      }

 

      //創(chuàng)建目錄失敗

      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;

      }

 

      //移動(dòng)文件

      if (!(move_uploaded_file($file["tmp_name"], $this->filePath) && file_exists($this->filePath))) { //移動(dòng)失敗

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

      } else { //移動(dòng)成功

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

      }

　　　/**

　　　 *此處上面的代碼都是demo內(nèi)的源代碼不需要改,下面才是我加上的需要敲黑板劃重點(diǎn)的地方,說(shuō)一下思路,上面的代碼會(huì)在本地生成上傳的圖片內(nèi)容,然后我們就可以拿到上傳的文件的全路徑,

　　　 *拿到全路徑再調(diào)用事先封裝好的上傳接口上傳到圖片服務(wù)器即可,由于第一步配置了圖片服務(wù)器的域名,所以最后返回給編輯器窗口的圖片路徑已經(jīng)是帶域名的全路徑啦

　　　 */

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

    

　　　//發(fā)送請(qǐng)求的參數(shù)

　　　$data = [

          'myFile'=>$imgPath,

          'imgType'=>4

      ];

　　 $serverUrl = 'http://img.com/api/image.action'; //請(qǐng)求地址

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

      curl_setopt($ch, CURLOPT_URL, $serverUrl);  

      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_POST, true);

      //https協(xié)議需要以下兩行，否則請(qǐng)求不成功

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);

      curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

      //post方法所需要的參數(shù)

      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數(shù)據(jù)轉(zhuǎn)為數(shù)組

      $this->fullName = $result['imgUrlNormal']; //重置要返回給編輯器窗口的圖片路徑,這一步可以讓圖片在編輯器內(nèi)正常顯示圖片

  }

3.改完這兩個(gè)地方之后,再自己寫一個(gè)上傳圖片的接口啦,將上面的請(qǐng)求地址緩存你的接口地址,比較簡(jiǎn)單也有一堆的例子,我這里就不貼出來(lái)了,這樣三步下來(lái)不出意外已經(jīng)可以跨域上傳圖片了,無(wú)論是單圖還是多圖都可以,既簡(jiǎn)單好理解又方便?。?！

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章標(biāo)題：ueditor富文本編輯器怎么實(shí)現(xiàn)跨域上傳圖片
鏈接URL：http://chinadenli.net/article32/gicjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、網(wǎng)站維護(hù)、App開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)