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

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.