Ideas:
La interfaz selecciona una imagen local y hace clic para cargarla. Controller.js envía una solicitud de carga a través de service.js y devuelve los datos empaquetados. Los datos incluyen la URL: response.data.url y el código de estado response.data.status. La URL es la URL de la imagen, si desea mostrarla en la página, obtenga la URL directamente
El back-end obtiene la solicitud del front-end, carga la imagen al servidor a través de la ruta del servicio y otra ola de operaciones, y encapsula el código de estado y la URL en el mapa para regresar.
Total: el front-end usa angularJS para cargar de forma asincrónica, y el back-end usa el tipo MultipartFile de springmvc para recibirlo y colocarlo
en el servidor de imágenes distribuidas. El servidor devuelve la ruta de la imagen y la ruta a la página para hacer eco de la imagen.
Interfaz
página
<table class="table table-bordered table-striped">
<tr>
<td>颜色</td>
<td><input class="form-control"
ng-model="picEntity.color" placeholder="颜色"></td>
</tr>
<tr>
<td>商品图片</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file"/>
<button class="btn btn-primary"
ng-click="uploadFile()"
type="button">上传</button>
</td>
<td><img src="{
{picEntity.url}}"
width="200px" height="200px"></td>
</tr>
</table>
</td>
</tr>
</table>
controlador js
goodsController.js
/**上传图片 */
$scope.uploadFile = function(){
baseService.uploadFile().then(function(response) {
/** 如果上传成功,取出url */
if(response.data.status == 200){
/** 设置图片访问地址 */
$scope.picEntity.url = response.data.url;
}else{
alert("上传失败!");
}
});
};
baseService.js
app.service("baseService", function($http){
/** 文件上传方法 */
this.uploadFile = function(){
/** 创建表单对象 */
var formData = new FormData();
/** 追加需要上传的文件 */
formData.append("file", file.files[0]);
/** 发送异步请求上传文件 */
return $http({
method : 'post', // 请求方式
url : "/upload", // 请求URL
data : formData, // 表单数据
headers : {
'Content-Type' : undefined}, // 请求头
transformRequest : angular.identity // 转换对象
});
};
});
/**
angularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器会帮我们把Content-Type设置为 multipart/form-data.
设置 transformRequest : angular.identity,angularjs transformRequest function 将序列化表单对象中的文件为二进制数据.
*/
Dependencia de backend
pinyougou-shop-web / pom.xml
<!-- commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
<!-- fastdfs-client -->
<dependency>
<groupId>org.csource</groupId>
<artifactId>fastdfs-client</artifactId>
</dependency>
Analizador de carga de archivos de configuración
pinyougou-shop-web / src / main / resources / springmvc.xml
<!-- 配置文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置文件上传默认编码 -->
<property name="defaultEncoding" value="UTF-8"/>
<!-- 设置文件上传大小 2MB: 2*1024*1024 -->
<property name="maxUploadSize" value="2097152"/>
</bean>
Controlador
Cree UploadController en el paquete com.pinyougou.shop.controller
UploadController.java
@RestController
public class UploadController {
/** 注入文件服务器访问地址 */
@Value("${fileServerUrl}")
private String fileServerUrl;
/** 文件上传 */
@PostMapping("/upload")
public Map<String, Object>
upload(@RequestParam("file")MultipartFile multipartFile) {
Map<String, Object> data = new HashMap<>();
data.put("status", 500);
try {
/** 加载配置文件,产生该文件绝对路径 */
String conf_filename = this.getClass()
.getResource("/fastdfs_client.conf").getPath();
/** 初始化客户端全局对象 */
ClientGlobal.init(conf_filename);
/** 创建存储客户端对象 */
StorageClient storageClient = new StorageClient();
/** 获取原文件名 */
String originalFilename =
multipartFile.getOriginalFilename();
/** 上传文件到FastDFS服务器 */
String[] arr = storageClient
.upload_file(multipartFile.getBytes(),
FilenameUtils.getExtension(originalFilename), null);
/** 拼接返回的 url 和 ip 地址,拼装成完整的 url */
StringBuilder url = new StringBuilder(fileServerUrl);
for (String str : arr){
url.append("/" + str);
}
data.put("status", 200);
data.put("url", url.toString());
} catch (Exception e) {
e.printStackTrace();
}
return data;
}
}
Archivo de configuración de ruta de servicio
pinyougou-shop-web / src / main / resources / fastdfs_client.conf
# 配置追踪服务器的地址
tracker_server=192.168.12.131:22122
application.properties
# 配置文件服务器的访问地址
fileServerUrl=http://192.168.12.131
springmvc.xml cargando la configuración application.properties
<!-- 加载属性文件 -->
<context:property-placeholder location="classpath:application.properties"/>
Sobre el proyecto detrás es el día de referencia de guardado06
Haga clic en guardar en la página para saltar a la lista y mostrar todas las imágenes, los datos de las imágenes están encapsulados en picEntity
página
<button class="btn btn-success" data-dismiss="modal"
ng-click="addPic()"
aria-hidden="true">保存</button>
goodsController.js
/** 定义数据存储结构 */
$scope.goods = {
goodsDesc : {
itemImages : []}};
/** 添加图片到数组 */
$scope.addPic = function(){
$scope.goods.goodsDesc.itemImages.push($scope.picEntity);
};
Página de visualización de lista
<tr ng-repeat="pic in goods.goodsDesc.itemImages">
<td>{
{pic.color}}</td>
<td><img alt="" src="{
{pic.url}}"
width="100px" height="100px"></td>
<td>
<button type="button" class="btn btn-default" title="删除">
<i class="fa fa-trash-o"></i> 删除
</button>
</td>
</tr>
Eliminar imagen de la lista
página
<button type="button" class="btn btn-default" title="删除"
ng-click="removePic($index)">
<i class="fa fa-trash-o"></i> 删除</button>
goodsController.js
/** 数组中移除图片 */
$scope.removePic = function(index){
$scope.goods.goodsDesc.itemImages.splice(index, 1);
};