Angular. js + node. js provides detailed instructions on how to download images,

Source: Internet
Author: User

Angular. js + node. js provides detailed instructions on how to download images,

Preface

This article mainly introduces how to download images through angular. js + node. js. There are two methods to download images. Let's not talk about them here. Let's take a look at the details.

First:

Do not specify the complete path, and then send get to the server so that the server can splice the path by itself, and then use res. download of express for download:

Express:

var filePath = path.join(savePath, file[0].name);console.log('Download file: ' + filePath);res.download(filePath);

Angular:

$http.get(url).success(function (data) { var bin = new $window.Blob([data]); deferred.resolve(data); // Using file-saver library to handle saving work. saveAs(bin, toFilename);})

This method is suitable for sending only the file name between the server and the user. Then, the browser constructs a restapi interface such as/api/download/xxxxx.png, and the server finds the complete path and sends it to the user.

Method 2:

Instead of writing server code, Alibaba Cloud uses the static file mechanism of express to send files to users.

Express:

app.use('/ocr/uploads', express.static('/data/ocr_img/dev', { maxAge: 86400000 }));

Angular:

$http.get(url, {responseType: 'arraybuffer'}).success(function (data) { var bin = new Blob([data], { "type" : "image/png" }); deferred.resolve({status: '200'}); saveAs(bin, toFilename);})

This method is suitable for users who know that the server has enabled static files. To construct a complete relative path, for example, if the url of the current webpage is/orc, as long as the url is constructed as uploads/xxx.png, then express will go to/data/ocr_img/dev/xxx.png and send the file back.

Note:When the image is sent back, the server uses the text/plain method by default, while the image requires binary. Therefore{responseType: 'arraybuffer'} And specify the typenew Blob([data],  { "type" : "image/png" } This type is also applicable to other image types, such as pdf, jpg, bmp, And tiff.

Image download is actually a download of binary files. For details, refer to an authoritative document of MDN:

Https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

This document is further expanded:

Https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.