javaweb-青橙项目-2-77

文章目录

  • 青橙-2 网站管理前端与图片上传
    • 学习目标
  • 1. ElementUI介绍
    • 1.1 什么是ElementUI
    • 1.2 ElementUI 常用组件
  • 2. ES6
    • 2.1 什么是ES6
    • 2.2 常用语法新特性
      • 2.2.1 变量声明let
      • 2.2.2 常量声明
      • 2.2.3 模板字符串
      • 2.2.4 箭头函数
  • 3. 青橙管理后台-品牌管理前端
    • 3.1 列表展示
    • 3.2 分页列表展示
    • 3.3 条件查询
    • 3.4 新增品牌
    • 3.5 修改品牌
    • 3.6 删除品牌
  • 4. 图片上传
    • 4.1 图片上传组件
    • 4.2 SpringMVC接收图片上传
  • 5. 云存储解决方案-阿里云OSS
    • 5.1 什么是阿里云OSS
    • 5.2 OSS开通
    • 5.3 OSS快速入门
    • 5.4 青橙管理后台-OSS图片上传

青橙-2 网站管理前端与图片上传

最终效果如图
此内容仅仅完成此部分功能,后续逐步介绍整体的前端后台
实现查询效果的界面分页效果
实现图片上传到对象服务器(对于图片,文件等资源需要有专门的服务器,占用空间巨大)
对于上次mapper实现的增删改查进行界面编写
javaweb-青橙项目-2-77_第1张图片

云服务器内的资源文件如下
javaweb-青橙项目-2-77_第2张图片
项目序列-2:https://github.com/Jonekaka/javaweb-qingcheng-2-77

学习目标

掌握ElementUI常用组件的使用
掌握ES6常用语法的使用
完成品牌管理前端代码
掌握图片上传代码的编写
掌握阿里云OSS的使用

1. ElementUI介绍

1.1 什么是ElementUI

Element,“饿了么”出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
比如表格,表单,下拉列表样式等等,因此可以直接使用方便,后台开发可以较快完成实践
提供了现成的组件模板
需要什么组件,选择然后查看提供的源码,复制调用即可,有样式,有属性介绍
javaweb-青橙项目-2-77_第3张图片

1.2 ElementUI 常用组件

详见elementUI官网 http://element-cn.eleme.io/2.0/#/zh-CN

2. ES6

2.1 什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展 。ecma本身是一套规范,javascript实现了这套规范
ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。
ECMAScript定义了:
语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
没有4版本,因为有很多新特性导致备受争议,被搁置了

ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)
的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用
场景,无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript是一门充满活力的语言,并在不断进化中。
未来版本的规范中将持续进行重要的技术改进

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发
布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开
发语言。

2.2 常用语法新特性

2.2.1 变量声明let

在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升,例如

function aa() {
     
        if(true) {
     
        var test = 'hello man'
        }
        alert(test)
        }

test不应该被检测到的,但是后面仍然可以使用
以上的代码实际上是:

function aa() {
     
        var test;
        if(true) {
     
        test = 'hello man'
        }
        alert(test)
        }

这其实并不好,因为声明一个变量,肯定是希望作用范围局限在声明的范围,而不是自由扩展,否则会导致语法混乱

接下来ES6
通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用
域。怎么理解这个块级作用域?在一个函数内部 ,在一个代码块内部。
相当于收缩了变量作用范围

function aa() {
     
        if(bool) {
     
        let test = 'hello man'
        } else {
     
//test 在此处访问不到
        console.log(test)
        }
        }

2.2.2 常量声明

const 用于声明常量,看以下代码

const name = 'lux'
name = 'joe' //再次赋值此时会报错

2.2.3 模板字符串

es6模板字符解决了ES5在字符串功能上的痛点。
比如拼接url地址,变量等等,需要考虑其中取值问题,现在自动解决了,输入变量名自动取值拼接
第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
注意使用反引号,就是英文~键下的小点

//es5
var name = 'lux'
        console.log('hello' + name)
//es6
        const name = 'lux'
        console.log(`hello ${
     name}`) //hello lux

第二个用途,在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反
引号(``)直接搞定。
假如字符很长,传统要使用斜杠保持适当的长度,现在使用反引号包着就行

// es5
var msg = "Hi \
        man!"
// es6
        const template = `<div>
<span>hello world</span>
</div>`

2.2.4 箭头函数

ES6有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
看下面代码(ES6)

(response,message) => {
     
        .......
        }

相当于ES5代码

function(response,message){
     
        ......
        }

ui有了,如何书写有了,功能函数也有了,开始写界面吧

3. 青橙管理后台-品牌管理前端

引入ui组件文件
css,字体文件
基于vue.js。内部js,异步js
javaweb-青橙项目-2-77_第4张图片
使用的还是之前的增删改查代码,此为其添加界面

3.1 列表展示

eui组件
javaweb-青橙项目-2-77_第5张图片

需求:如下图所示,使用表格控件显示全部的品牌数据,分页与条件查询下面依次完善。
对于图片也应该显示

javaweb-青橙项目-2-77_第6张图片

代码实现:

<!--引入样式表-->
<!--引入js-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>品牌管理</title>

<link rel="stylesheet" href="../css/elementui.css">
</head>
<body>

<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>
</body>
</html>

(2)编写页面js:

/*定义作用域,约定为上的div app*/
/*后端异步请求*/
/*箭头函数省略,e6新特性*/
<script>
new Vue({
     

        el: '#app',
        data() {
     
        return {
     
        
        tableData: []
        }
        },
        created() {
     
        
        axios.get('/brand/findAll.do').then(response=> {
     
        this.tableData = response.data;
        });
        }
        })
</script>

(3)使用表格控件展现数据
直接调控件即可

<!--取数据中的哪个属性-->
<!--表头,标题-->
 <!--图片模板列-->
 <!--scop行对象-->
<el‐table :data="tableData" border style="width: 100%">
<el‐table‐column

        prop="id"
        
        label="ID"
        width="180">
</el‐table‐column>
<el‐table‐column
        prop="name"
        label="名称"
        width="180">
</el‐table‐column>
<el‐table‐column
        prop="letter"
        label="首字母">
</el‐table‐column>
<el‐table‐column
        label="图片"
        width="180">
       
<template slot‐scope="scope">

<img :src="scope.row.image">
</template>
</el‐table‐column>
</el‐table>

javaweb-青橙项目-2-77_第7张图片

结果全部展示并不现实就像百度搜索中的百万条结果,你只需要看到前10条,需要分页

3.2 分页列表展示

去eui找分页ui组件
javaweb-青橙项目-2-77_第8张图片

(1)页面的表格下方添加分页组件

 <!--这里是分页-->
  <!--执行的方法-->
  <!--sync修饰符,不加表示从变量取值后,变量更改不会改变,就错误的固定了,就是点击没有反应,
        不会重新加载数据-->
  <!--从下面vue中取值-->
   <!--约定显示的控件有哪些-->

    <el-pagination>
           
            @size-change="fetchData"
            @current-change="fetchData"
        
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
       
            :page-size="size"
       
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

size-change 页大小更改时触发的事件
current-change 当前页更改时触发的事件
current-page 当前页变量
page-sizes 每页记录数选项列表
page-size 当前选择的每页记录数
layout布局列表 total 总记录数 sizes 每页记录数选择框 prev 上一页 next下一页
pager 页码 jumper 为页码跳转
total 为总记录数
(2)修改js脚本

new Vue({
     
el: '#app',
data(){
     
return {
     
tableData: [],
currentPage: 1,
total: 10,
size: 10
}
},
created(){
     
this.fetchData();
},
methods:{
     
fetchData (){
     
axios.get(
`/brand/findPage.do?page=${
     this.currentPage}&size=${
     this.size}`).then(
response=> {
     
this.tableData = response.data.rows;
this.total = response.data.total;
});
}
}
})

这里便创建了分页效果
javaweb-青橙项目-2-77_第9张图片

3.3 条件查询

查找ui控件,
实现思路: 表格上方添加表单,表单内的文本框等控件绑定查询对象,点击查询按钮触发方法,将查询对象传递给后端进行查询。
代码实现:
(1)在表格上方添加表单

<!‐‐查询表单‐‐>
<!--placeholder是文本框默认的文字提示,占位文本-->

<el‐form :inline="true" >
<el‐form‐item label="品牌名称">

<el‐input v‐model="searchMap.name" placeholder="品牌名称">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌的首字母">
<el‐input v‐model="searchMap.letter" placeholder="品牌的首字母"></el‐input>
</el‐form‐item>
<el‐button type="primary" @click="fetchData()">查询</el‐button>
</el‐form>

(2)修改 js代码 ,data新增searchMap属性,既分页,又有条件

searchMap: {
     }

更改axios调用的代码,改为post提交,传递searchMap对象

axios.post(`/brand/findPage.do?
        page=${
     this.currentPage}&size=${
     this.size}`,this.searchMap)

javaweb-青橙项目-2-77_第10张图片

3.4 新增品牌

javaweb-青橙项目-2-77_第11张图片

需求:页面上添加“新增”按钮,点击新增按钮弹出窗口,窗口中包含表单和保存、关闭按
钮。填写数据后点击保存按钮关闭窗口,刷新列表数据。
(1)窗口的弹出与关闭:data添加属性,用于控制窗口显示

formVisible: false

添加弹出窗口

<!‐‐弹出窗口‐‐>

<el‐dialog title="编辑" :visible.sync="formVisible" >
<el‐button @click="formVisible = false" >关闭</el‐button>
</el‐dialog>

添加按钮,控制窗口的弹出
(2)data添加属性pojo 用于保存实体

pojo: {
     }

在窗口添加表单

<!--标签宽度,不指定默认占一行-->

<el‐form label‐width="80px">
<el‐form‐item label="品牌名称">
<el‐input placeholder="品牌名称" v‐model="pojo.name">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌首字母">
<el‐input placeholder="品牌首字母" v‐model="pojo.letter">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌图片">
<el‐input placeholder="品牌图片" v‐model="pojo.image">
</el‐input>
</el‐form‐item>
<el‐form‐item label="排序">
<el‐input placeholder="排序" v‐model="pojo.seq"></el‐
        input>
</el‐form‐item>
<el‐form‐item>
<el‐button @click="save()">保存</el‐button>
<el‐button @click="formVisible = false">关闭</el‐button>
</el‐form‐item>
</el‐form>

(3)添加save方法

save (){
     
        axios.post('/brand/add.do',this.pojo).then(response => {
     
        this.fetchData ();//刷新列表
        this.formVisible = false ;//关闭窗口
        });
        }

javaweb-青橙项目-2-77_第12张图片

3.5 修改品牌

eui选择按钮组件
需求:在表格中添加操作列,操作列中有修改按钮,点击修改按钮弹出窗口加载数据。
用户修改数据后点击保存,保存后关闭窗口刷新列表。
共用新增的弹出编辑窗口
既然是新增,修改和新增的不同在于id是否存在,因此可以通过判断微调路径实现统一,判断即可
本质就是新增UI按钮,编写按钮触发的函数,函数调用后台函数
(1)在表格中新增模板列

<el‐table‐column
        label="操作" >
<template slot‐scope="scope">
<el‐button @click="edit(scope.row.id)" type="text" size="small">
        修改</el‐button>
</template>
</el‐table‐column>

(2)增加edit方法,用于加载数据

edit (id){
     
        this.formVisible = true // 打开窗口
// 调用查询
        axios.get(`/brand/findById.do?id=${
     id}`).then(response => {
     
        this.pojo = response.data;
        })
        }

(3)修改save方法
新增id不存在,修改id存在

save (){
     
        axios.post(`/brand/${
     this.pojo.id==null?'add':'update'}.do`,this.pojo).th
        en(response => {
     
        this.fetchData (); //刷新列表
        this.formVisible = false ;//关闭窗口
        });
        }

(4)编辑拉取当前id的数据是应该的,但是新增不行,要清空

<!--这里希望数据新增时,之前的pojo数据清空,否则上一次操作的如新增,编辑数据还在弹出框中-->

        <el-button type="primary" @click="pojo={},formVisible = true">新增</el-button>

修改拉取当前id数据
javaweb-青橙项目-2-77_第13张图片
新增则清空pojo数据
javaweb-青橙项目-2-77_第14张图片

3.6 删除品牌

eui找到弹出创接口插件
javaweb-青橙项目-2-77_第15张图片

需求: 表格操作列增加“删除”按钮,点击删除,弹出提示,确定后删除数据刷新列表。
(1)操作列中新增“删除”按钮

<el‐button @click="dele(scope.row.id)" type="text" size="small">删除</el‐
        button>

(2)新增dele方法

/*删除后重新刷新数据*/
/*对于删除应该有提示窗,否则点击就删除完蛋*/

dele (id){
     
        this.$confirm('确定要删除此记录吗?', '提示', {
     
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then( () => {
     
        axios.get(`/brand/delete.do?id=${
     id}`).then(response => {
     
        if(response.data.code==0){
     
        
        this.fetchData (); //刷新列表
        }else{
     
        this.$alert(response.data.message)
        }
        })
        })
        }

4. 图片上传

4.1 图片上传组件

eui组件
javaweb-青橙项目-2-77_第16张图片

(1)在弹出窗口中放置图片上传组件

/* 上传之后会触发钩子函数*/
/* 上传之前会触发钩子函数*/
<el‐upload
class="avatar‐uploader"
        action="/upload/native.do"
        :show‐filelist="false"
       
        :on‐success="handleAvatarSuccess"
        
        :before‐upload="beforeAvatarUpload">
<img v‐if="imageUrl" :src="imageUrl" class="avatar">
<i v‐else class="el‐icon‐plus avatar‐uploader‐icon"></i>
</el‐upload>

(2)修改脚本,data 增加属性
url地址默认为空

imageUrl: ''

增加方法

/*上传文件,返回的具体地址*/
/*上传之前对图片格式检测*/

handleAvatarSuccess(res, file) {
     
        this.imageUrl = file.response;
        },
        
        beforeAvatarUpload(file) {
     
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
     
        this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
     
        this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        }

(3)修改edit方法和save方法

//save方法第一句添加,将url上传
this.pojo.image= this.imageUrl;
//edit方法回调时添加,上传后显示
this.imageUrl=this.pojo.image //显示图片

需要注意的是商品图片上传大小不一,应该用统一格式显示

<style>
        .avatar-uploader .el-upload {
     
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
     
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
     
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
     
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

4.2 SpringMVC接收图片上传

SpringMVC 中,文件的上传,是通过 MultipartResolver 实现的。 所以,如果要实现文
件的上传,只要在 spring-mvc.xml 中注册相应的 MultipartResolver 即可。
MultipartResolver 的实现类有两个:

  1. CommonsMultipartResolver
  2. StandardServletMultipartResolver
    两个的区别:
  3. 第一个需要使用 Apache 的 commons-fileupload 等 jar 包支持,但它能在比较旧的
    servlet 版本中使用。
  4. 第二个不需要第三方 jar 包支持,它使用 servlet 内置的上传功能,但是只能在
    Servlet 3 以上的版本使用。
    为了通用性,一般选择第一种
    (1)qingcheng_common_web增加配置
<!‐‐ 多部分文件上传 ‐‐>
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver
        ">
<property name="maxUploadSize" value="104857600" />
<property name="defaultEncoding" value="UTF‐8"></property>
</bean>

maxUploadSize: 设置允许上传的最大文件大小,以字节为单位计算。当设为-1时表示
无限制,默认是-1。
defaultEncoding:表示用来解析request请求的默认编码格式,当没有指定的时候根据
Servlet规范会使用默认值ISO-8859-1。当request自己指明了它的编码格式的时候就会忽
略这里指定的defaultEncoding。
(2)qingcheng_web_manager工程新建controller

@RestController
@RequestMapping("/upload")
public class UploadController {
     
    @Autowired
    private HttpServletRequest request;
    /*本地文件上传,取参数file*/
    @PostMapping("/native")
    public String nativeUpload(@RequestParam("file") MultipartFile file)
    {
     
    /*确定用户上传的路径,写入的路径,获得img的绝对路径*/
        String  path=request.getSession().getServletContext().getRealPath("img");
        /*存储路径,获得文件的原始文件名*/
        String filePath = path +"/"+ file.getOriginalFilename();
        File desFile = new File(filePath);
        /*确保目录一定存在,不存在就创建*/
        if(!desFile.getParentFile().exists()){
     
            desFile.mkdirs();
        }
        try {
     
        /*写文件的细节,已经封装好*/
            file.transferTo(desFile);
        } catch (Exception e) {
     
            e.printStackTrace();
        }
        /*最终返回上传后的文件名*/
        return "http://localhost:9101/img/"+file.getOriginalFilename();
    }
}

MultipartFile是spring类型,代表HTML中form data方式上传的文件,包含二进制数据
+文件名称
但是
通常文件图片不会放到本地,否则本地服务器将承担巨大的存储压力,而是单独开辟一个云空间存储,因为其空间需求增长迅速

5. 云存储解决方案-阿里云OSS

5.1 什么是阿里云OSS

对于一些小公司自建文件存储仓库并非最佳方案,可以使用阿里云存储

阿里云对象存储服务(Object Storage Service,简称OSS)提供基于网络的数据存取服务。使用OSS,可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。
阿里云OSS将数据文件以对象(object)的形式上传到存储空间(bucket)中。
您可以进行以下操作:
创建一个或者多个存储空间,向每个存储空间中添加一个或多个文件。(项目对应着一个空间,方便管理)
通过获取已上传文件的地址进行文件的分享和下载。
通过修改存储空间或文件的属性或元信息来设置相应的访问权限。
在阿里云管理控制台执行基本和高级OSS任务。
使用阿里云开发工具包或直接在应用程序中进行RESTful API调用执行基本和高级OSS任务

5.2 OSS开通

(1)打开https://www.aliyun.com/ ,申请阿里云账号并完成实名认证。
(2)找到控制台
(3)开通OSS:
javaweb-青橙项目-2-77_第17张图片
进入控制台
(4)创建存储空间
新建Bucket,命名为qcshangchenglilia(我瞎编的,名字是不可以重复的,自己注册一个去) ,
读写权限设置为公共读,任何人都有读权限
私有,必须拥有高级权限,(太麻烦)
公共读写,任何人都具备读写权限(不安全)
javaweb-青橙项目-2-77_第18张图片

会提供访问域名,所有图片等等会存储在其下
根据流量,访问次数收费
创建好后可见
javaweb-青橙项目-2-77_第19张图片
然后为项目创建访问账号密码
javaweb-青橙项目-2-77_第20张图片
有子账号与母账号区别
子账号可以为每个项目都独立访问,母账号则一个key访问所有,一旦泄露,所有项目都不安全
当然为每一个项目创建一个访问的独立子账号
需要注意的是,如果开通编程访问,除了创建时可见秘钥,其他不可见,因此应该及时保存信息
子账号如此
母账号想要得到秘钥还需要手机号验证
javaweb-青橙项目-2-77_第21张图片

javaweb-青橙项目-2-77_第22张图片

5.3 OSS快速入门

看官方oss文档即可,引入javajar包
(1)创建测试工程,引入依赖

<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun‐sdk‐oss</artifactId>
<version>2.8.2</version>
</dependency>

(2)新建类和main方法

//输入自己选择的服务器的域名,控制台窗口查看
String endpoint = "http://oss‐cn‐beijing.aliyuncs.com";
// 云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建
        并使用RAM子账号进行API访问或日常运维,请登录
        String accessKeyId = "LTAI5tMGz1h9CtwUTo39169A";
        String accessKeySecret = "自己注册不香吗?)";
        //bucket创建时写的名字
        String bucketName = "qcshangchenglilia";
// 创建OSSClient实例
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId,
        accessKeySecret);
// 上传文件流
        InputStream inputStream = null;
        try {
     
        inputStream = new FileInputStream("d:/a.jpg");
        } catch (FileNotFoundException e) {
     
        e.printStackTrace();
        }
        ossClient.putObject(bucketName, "test.html", inputStream);
// 关闭client
        ossClient.shutdown();

上传后,在仓库-文件管理可见
并且每个文件都有了域名,拥有权限后即可查看,成为互联网共用资源
javaweb-青橙项目-2-77_第23张图片

总是如此连接不现实,应该配置成bean文件

5.4 青橙管理后台-OSS图片上传

(1)qingcheng_common_web添加依赖

<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun‐sdk‐oss</artifactId>
<version>2.8.2</version>
</dependency>

(2)qingcheng_common_web添加配置

<!‐‐阿里云OSS‐‐>
<bean id="ossClient" class="com.aliyun.oss.OSSClient">
<constructor‐arg index="0" value="oss‐cn‐beijing.aliyuncs.com">
</constructor‐arg>
//id,秘钥,自己注册不香吗?
<constructor‐arg index="1" value="accessKeyId">
</constructor‐arg>
<constructor‐arg index="2"
        value="accessKeySecret"></constructor‐arg>
</bean>

(3)UploadController新增方法

@Autowired
private OSSClient ossClient;
@PostMapping("/oss")
public String ossUpload(@RequestParam("file") MultipartFile
        file,String folder){
     
        //bucket名字
        String bucketName="qcshangchenglilia";
        String fileName= folder+ "/"+ UUID.randomUUID()+
        file.getOriginalFilename();
        try {
     
        ossClient.putObject(bucketName,fileName,file.getInputStream());
        } catch (IOException e) {
     
        e.printStackTrace();
        }
        return "https://"+bucketName +".oss‐cn‐
        beijing.aliyuncs.com/"+fileName;
        }

(4)修改brand.html页面的上传组件
这样点击上传时,就将图片文件上传到阿里云oss对象服务器了

<el‐upload
        ......
        action="/upload/oss.do?folder=brand"
        ......
        >
</el‐upload>

你可能感兴趣的:(javaweb,java)