发送图像上传到服务器，并将其保存在服务器 [英] Send an uploaded image to the server and save it in the server
本文介绍了发送图像上传到服务器，并将其保存在服务器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要上传图片并保存在服务器中。我上传的图片的拿到了preVIEW过，但我坚持在图像发送到服务器。我想采用了棱角分明的服务这个图片发送给服务器。
这是HTML code
＆LT;输入类型=文件FILEREAD =vm.uploadme/＆GT;
＆LT; IMG SRC ={{vm.uploadme}}WIDTH =100HEIGHT =50ALT =图片preVIEW ......＆GT;
这是指令
（函数（）{
angular.module（'appBuilderApp'）。指令（FILEREAD，[功能（）{
返回{
范围： {
FILEREAD：=
}，
链接：功能（范围，元素，属性）{
element.bind（变，功能（changeEvent中）{
VAR读卡器=新的FileReader（）;
reader.onload =功能（比如LoadEvent）{
范围。$应用（函数（）{
scope.fileread = loadEvent.target.result;
}）;
}
reader.readAsDataURL（changeEvent.target.files [0]）;
}）;
}
}
}]）;
}）（）;
解决方案
假设在后端你期望多部分这里是一片code已经为我工作的。
这里是一个的jsfiddle 。
\r
\r\r
\r VAR应用= angular.module（'对myApp'，[]）\r
\r
app.controller（'myController的'，\r
\r
功能myController的（$范围，$ HTTP）{\r
\r
//图片\r
$ scope.uploadme;\r
\r
$ scope.uploadImage =功能（）{\r
变种FD =新FORMDATA（）;\r
VAR imgBlob = dataURItoBlob（$ scope.uploadme）;\r
fd.append（文件，imgBlob）;\r
$ http.post（\r
IMAGEURL'，\r
FD，{\r
transformRequest：angular.identity，\r
标题：{\r
内容类型：未定义\r
}\r
}\r
）\r
.success（功能（响应）{\r
的console.log（'成功'，响应）;\r
}）\r
.error（功能（响应）{\r
的console.log（'错误'，响应）;\r
}）;\r
}\r
\r
\r
//你需要这个功能将转换dataURI\r
功能dataURItoBlob（dataURI）{\r
变种二进制= ATOB（dataURI.split（，）[1]）;\r
变种mimeString = dataURI.split（，）[0] .split（：）[1] .split（';'）[0];\r
变种数组= [];\r
对于（VAR I = 0; I＆LT; binary.length;我++）{\r
的Array.push（binary.char $ C $猫（一））;\r
}\r
返回新的Blob（[新Uint8Array（阵列）] {\r
类型：mimeString\r
}）;\r
}\r
\r
}）;\r
\r
\r
//你的指令\r
app.directive（FILEREAD，[\r
功能（）{\r
返回{\r
范围： {\r
FILEREAD：=\r
}，\r
链接：功能（范围，元素，属性）{\r
element.bind（变，功能（changeEvent中）{\r
VAR读卡器=新的FileReader（）;\r
reader.onload =功能（比如LoadEvent）{\r
范围。$应用（函数（）{\r
scope.fileread = loadEvent.target.result;\r
}）;\r
}\r
reader.readAsDataURL（changeEvent.target.files [0]）;\r
}）;\r
}\r
}\r
}\r
]）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; DIV NG-应用=对myApp＆GT;\r
＆LT; DIV NG控制器=myController的＆GT;\r
＆LT;输入类型=文件FILEREAD =uploadme/＆GT;\r
＆LT; IMG SRC ={{uploadme}}WIDTH =100HEIGHT =50ALT =图片preVIEW ......＆GT;\r
＆LT; BR /＆GT;\r
＆所述p为H.;\r
图片dataURI：\r
＆LT; pre＆GT; {{uploadme}}＆LT; / pre＆GT;\r
＆所述; / P＆GT;\r
＆LT; BR /＆GT;\r
＆LT;按钮NG点击=uploadImage（）＆GT;上传图片＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
注意下列部分：
{
transformRequest：angular.identity，
标题：{
内容类型：未定义
}
}
一些角魔，为了使$ HTTP解析FORMDATA并找到正确的内容类型等等...
I want to upload an image and save it in the server. I uploaded the image an got the preview too, but I am stuck in sending that image to the server. I want to send this image to the server using angular services.
This is the html code
<input type="file" fileread="vm.uploadme" />
<img src="{{vm.uploadme}}" width="100" height="50" alt="Image preview...">
This is the directive
(function(){
angular.module('appBuilderApp').directive("fileread", [function () {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.fileread = loadEvent.target.result;
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}]);
})();
解决方案
Assuming in the backend you expect Multipart here is a piece of code that has worked for me.
And here is a jsfiddle.
var app = angular.module('myApp', [])
app.controller('MyController',
function MyController($scope, $http) {
//the image
$scope.uploadme;
$scope.uploadImage = function() {
var fd = new FormData();
var imgBlob = dataURItoBlob($scope.uploadme);
fd.append('file', imgBlob);
$http.post(
'imageURL',
fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}
)
.success(function(response) {
console.log('success', response);
})
.error(function(response) {
console.log('error', response);
});
}
//you need this function to convert the dataURI
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: mimeString
});
}
});
//your directive
app.directive("fileread", [
function() {
return {
scope: {
fileread: "="
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
var reader = new FileReader();
reader.onload = function(loadEvent) {
scope.$apply(function() {
scope.fileread = loadEvent.target.result;
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<input type="file" fileread="uploadme" />
<img src="{{uploadme}}" width="100" height="50" alt="Image preview...">
<br/>
<p>
Image dataURI:
<pre>{{uploadme}}</pre>
</p>
<br/>
<button ng-click="uploadImage()">upload image</button>
</div>
</div>
Note that the following part:
{
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}
is some Angular magic, in order for $http to parse FormData and find the correct content-type and so on...
这篇关于发送图像上传到服务器，并将其保存在服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
