1. Create 1 Azure accounts and create 1 azurestorage after logging in. The lower left point manage access sees primary access key and storage account, remembers their location, and so on, needs to be configured in Web. config.
2. Create Web.api project, upload the image code:
[HttpPost] public async task
Includes two action,postfile and Azureimageurls, which are used to receive post-file objects, which are used to get the URI from Azure back to the client.First, when uploading, you need to set this line of code:
Publicaccess = Blobcontainerpublicaccesstype.blob
If not set, the default access permission is not to be able to directly interview the BLOB image on the client. Thus the picture is not displayed.
Second, when the client obtains the URI, the API needs to set this line of code:
HttpContext.Current.Response.AddHeader ("Access-control-allow-origin", "*");
Because the cross-domain Ajax is not agreed by default, this line of code is implemented in Cors (Resource sharing), in addition to JSONP can do, but need to return the server side of the JS function call code, about the cross-domain Ajax request, This is a good article to see in detail:
https://jvaneyck.wordpress.com/2014/01/07/cross-domain-requests-in-javascript/
3. Web Config
<appSettings> <add key= "azureimagestorage" value= "defaultendpointsprotocol=http; Accountname=name; Accountkey=yourkey "/> </appSettings>
The thing that needs attention is. A space is not agreed to in value. This link string is a standard form, with many other azure link strings that can be taken:
Https://www.connectionstrings.com/windows-azure/
4. It is recommended to download similar FTP management tools like cloud Berry. Easy to view uploaded images, assuming that the wrong pass can be deleted:
Http://www.cloudberrylab.com
5. Client HTML implementation: