Ueditor uploading images to seven kn C # (Backend implementation)

Because the personal website space storage has the choice to store the picture uniformly on seven cows, the reason is simple

1 free 10G capacity, sufficient for personal website

2 Spec Developer documentation and complete SDK (almost all popular language SDKs)

Holistic approach

Picture upload seven Qiniu in my opinion there are two ways

1 Front-end form or Ajax asynchronous submit request to seven cattle server, of course, at this time also need to go through the backend to obtain the corresponding token (image, seven cattle server)

2 Direct Backend Code request seven cattle server, the official version of the SDK provided by the language, can improve development efficiency, reduce the development difficulty (image, own server, seven cattle server)

Because this article describes the use of Ueditor images to upload seven cow cloud, so if you use the way 1 to change should be Ueditor js source files and config configuration file and other information

Use mode 2, you need to change the background code (Ueditor different background language has the corresponding source, download time comes with)

Simple introduction and use of seven Qiniu storage

To get a better understanding of what's going on, let's take a look at the seven Qiniu storage

1. Of course, first you have to register a seven ox account, and then go into the object storage, create a new storage space this is equivalent to a folder on the server, this is necessary in the later code to use.

2 After you've built it, you can see the default domain name for the Content Management tab in the corresponding storage space. This is opvqiebq9.bkt.clouddn.com, and this is the address to which you want the image to be accessed, such as opvqiebq9.bkt.clouddn.com/img1.jpg.

3. Of course, as their own website must have their own domain name, how will allow their own picture outside the chain long this ugly like it, just do a site of their own two-level domain name binding I use the img.siyouku.cn

Click on the Domain Name Binding tab page, where you can use the normal domain name

4 bind well after binding good general one or two hours to generate a CNAME domain name to parse next also need to go to your domain provider management background Add a CNAME resolution, click here Tutorial

OK above is seven cow storage space basic settings, at this time img.siyouku.cn is the equivalent of your image server, the next thing we want to do is upload pictures

Upload specific implementations

This article uses the second method described above is to rewrite the ueditor back-end code directly request seven cattle server upload, front-end way There are some good tutorials online

can refer to http://www.cnblogs.com/chshapple/archive/2015/09/11/4802208.html

https://my.oschina.net/duoduo3369/blog/174655

1 First we have to find the seven Bull C # version of the SDK, the tutorial is very detailed, let us know how to reference and use the Basic class library Https://developer.qiniu.com/kodo/sdk/1237/csharp

2 Next we locate the upload file, we will find that there are many upload methods here we choose File Stream upload as an example, in fact, the SDK has helped us do almost everything we need to rewrite this code into your Ueditor upload code is OK,

The key points in the code are several 1. AccessKey and Secretkey This is in your seven bull admin can find, personal center--Key management

2. Buckut This is the only name that was created in front of the storage space I'm Siyouku here.

3. There is the name of Savekey this can use the picture

1 //This Mac is required to generate (upload) credentials2 //This example uses a single settings class, which contains accesskey and Secretkey3 //in practical applications, please set your own accesskey and Secretkey4Mac Mac =NewMac (Settings.accesskey, settings.secretkey);5  6 stringBucket ="Test";7 stringSavekey ="1.jpg";8  9 //upload policy, seeTen // Https://developer.qiniu.com/kodo/manual/put-policy OnePutpolicy Putpolicy =NewPutpolicy (); A   - //If you need to set to overwrite upload (if the cloud already has a file with the same name overwritten), use SCOPE = "Bucket:key" - //Putpolicy.scope = bucket + ":" + Savekey; thePutpolicy.scope =buckets; -   - //Upload policy validity period (corresponds to the validity period of the generated voucher) -Putpolicy.setexpires (3600); +   - //How many days after uploading to the cloud automatically delete the file, if not set (that is, leave the default default) is not deleted +Putpolicy.deleteafterdays =1; A   at //generate upload credentials, see - // Https://developer.qiniu.com/kodo/manual/upload-token -   - stringJstr =putpolicy.tojsonstring (); - stringtoken =Auth.createuploadtoken (Mac, jstr); -   in Try - { to stringURL ="http://img.ivsky.com/img/tupian/pre/201610/09/beifang_shanlin_xuejing-001.jpg"; + varWReq = System.Net.WebRequest.Create (URL) asSystem.Net.HttpWebRequest; - varRESP = Wreq.getresponse () asSystem.Net.HttpWebResponse; the using(varstream =resp. GetResponseStream ()) * { $ //do not use UploadManager's Uploadstream method because this stream does not support lookups (cannot get Stream.length)Panax Notoginseng //Please use the Uploadstream method of Formuploader or Resumableuploader -Formuploader fu =NewFormuploader (); the varresult = Fu. Uploadstream (Stream,"xuejing-001.jpg", token); + Console.WriteLine (result); A } the } + Catch(Exception ex) - { $ Console.WriteLine (ex); $ } -}

View Code

3 Next we add a class under the Ueditor code folder to control the code upload seven Qiniu and return the corresponding file name, a new control class named Myuploadhandler, with the same code structure as Uploadhandler,

Here we just need to change the process method.

4 Paste the code that is uploaded in the process directly below

The overall idea of the code is to stream the file through the seven-ox SDK upload, combined with the above upload example should be very well understood, and finally we just need to deserialize the resulting results back to text on the line

1   Public Override voidProcess ()2         { 3             stringUploadfilename =NULL;4             varAccessKey ="fill in your seven bull backstage to find the corresponding accesskey";5             varSecretkey ="fill in your seven bull backstage to find the corresponding Secretkey";6Httppostedfile file =Request.files[uploadconfig.uploadfieldname];7Stream MyStream =file. InputStream;8             9Uploadfilename =file. FileName;Ten    One             if(!Checkfiletype (uploadfilename)) A             { -Result.state =Uploadstate.typenotallow; - Writeresult (); the                 return; -             } -             if(!checkfilesize (file. contentlength)) -             { +Result.state =Uploadstate.sizelimitexceed; - Writeresult (); +                 return; A             } at             //This Mac is required to generate (upload) credentials -             //This example uses a single settings class, which contains accesskey and Secretkey -             //in practical applications, please set your own accesskey and Secretkey -Mac Mac =NewMac (AccessKey, secretkey); -             stringBucket ="Siyouku"; -             stringSavekey =Uploadfilename; in  -  to             //make sure that the AK and bucket are correct before use, otherwise this function throws an exception (such as a code612/631 error) +Qiniu.Common.Config.AutoZone (AccessKey, bucket,false); -  the  *             //upload policy, see $             // Https://developer.qiniu.com/kodo/manual/put-policyPanax NotoginsengPutpolicy Putpolicy =NewPutpolicy (); -             //If you need to set to overwrite upload (if the cloud already has a file with the same name overwritten), use SCOPE = "Bucket:key" thePutpolicy.scope = bucket +":"+Savekey; +             //putpolicy.scope = bucket; A             //Upload policy validity period (corresponds to the validity period of the generated voucher) thePutpolicy.setexpires (3600); +             //How many days after uploading to the cloud automatically delete the file, if not set (that is, leave the default default) is not deleted -Putpolicy.deleteafterdays =1; $  $             //generate upload credentials, see -             // Https://developer.qiniu.com/kodo/manual/upload-token             -             stringJstr =putpolicy.tojsonstring (); the             stringtoken =Auth.createuploadtoken (Mac, jstr); -             TryWuyi             { the                     //do not use UploadManager's Uploadstream method because this stream does not support lookups (cannot get Stream.length) -                     //Please use the Uploadstream method of Formuploader or Resumableuploader WuFormuploader fu =NewFormuploader (); -                     varresult =Fu. Uploadstream (MyStream, Savekey, token); About                 varx = newtonsoft.json.jsonconvert.deserializeobject<qiniuresult>(result.) Text); $Result.url =X.key; -Result.state =uploadstate.success; -             } -             Catch(Exception e) A             { +Result.state =Uploadstate.fileaccesserror; theResult.errormessage =E.message; -             } $             finally the             { the Writeresult (); the             } the   -}

View Code

5 finally you will find that the upload success of the picture is still not correctly displayed in the Ueditor, errors such as, view the HTML source code you will find that the path is not correct, so we have a very important step, that is, to change the Config.json configuration file Imageurlprefix Properties Change your seven-piece domain name, which is the front bound img.siyouku.cn

OK here you have completed the editor upload image to seven cow cloud,

Ueditor uploading images to seven kn C # (Backend implementation)