黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 5 章 九 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-21 10:45
标题: 【郑州校区】品优购电商系统开发第 5 章 九

【郑州校区】品优购电商系统开发第 5 章 九

6.3 前端代码
6.3.1 服务层
（1）在 pinyougou-shop-web 工程创建 uploadService.js

[AppleScript] 纯文本查看 复制代码

 //文件上传服务层

app.service("uploadService",function($http){

this.uploadFile=function(){

var formData=new FormData();

formData.append("file",file.files[0]);

return $http({

method:'POST',

url:"../upload.do",

data: formData,

headers: {'Content-Type':undefined},

transformRequest: angular.identity

});

}

});

anjularjs 对于 post 和 get 请求默认的 Content-Type header 是 application/json。通过设置‘Content-Type’: undefined，这样浏览器会帮我们把 Content-Type 设置为 multipart/form-data.
通过设置 transformRequest: angular.identity ，anjularjs transformRequest function 将序列化我们的 formdata object.
（2）将 uploadService 服务注入到 goodsController 中

[AppleScript] 纯文本查看 复制代码

//商品控制层（商家后台）

app.controller('goodsController' ,function($scope,$controller ,goodsService,itemCa

tService,uploadService){

（3）在 goods_edit.html 引入 js

[AppleScript] 纯文本查看 复制代码

<script type="text/javascript" src="../js/base.js"> </script>

<script type="text/javascript" src="../js/service/goodsService.js"> </script>

<script type="text/javascript" src="../js/service/itemCatService.js"> </script>

<script type="text/javascript" src="../js/service/uploadService.js"> </script>

<script type="text/javascript" src="../js/controller/baseController.js"> </script>

<script type="text/javascript" src="../js/controller/goodsController.js"> </script> 

6.3.2 上传图片
（1）goodsController 编写代码

[AppleScript] 纯文本查看 复制代码

/**

* 上传图片

*/

$scope.uploadFile=function(){

uploadService.uploadFile().success(function(response) {

if(response.success){//如果上传成功，取出 url

$scope.image_entity.url=response.message;//设置文件地址

}else{

alert(response.message);

}

}).error(function() {

alert("上传发生错误");

});

}; 

（2）修改图片上传窗口，调用上传方法，回显上传图片

[AppleScript] 纯文本查看 复制代码

 <div class="modal-body">

<table class="table table-bordered table-striped">

<tr>

<td>颜色</td>

<td><input class="form-control" placeholder="颜色"

ng-model="image_entity.color"> </td>

</tr>

<tr>

<td>商品图片</td>

<td>

<table>

<tr>

<td>

<input type="file" id="file" />

<button class="btn btn-primary" type="button"

ng-click="uploadFile()">

上传

</button>

</td><td>

<img src="{{image_entity.url}}" width="200px"

height="200px">

</td>

</tr>

</table>

 

</td>

 

</tr>

 

</table>

</div>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2