[资源下载] 【郑州校区】传智健康项目讲义第四章五

【郑州校区】传智健康项目讲义第四章五

2.2.3 图片上传并预览
此处使用的是ElementUI提供的上传组件el-upload，提供了多种不同的上传效果，上传成功后可以进行预览。
实现步骤：
（1）定义模型数据，用于后面上传文件的图片预览：

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

 imageUrl:null,//模型数据，用于上传图片完成后图片预览

（2）定义上传组件：

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

 <!‐‐
el‐upload：上传组件
action：上传的提交地址
auto‐upload：选中文件后是否自动上传
name：上传文件的名称，服务端可以根据名称获得上传的文件对象
show‐file‐list：是否显示已上传文件列表
on‐success：文件上传成功时的钩子
before‐upload：上传文件之前的钩子
‐‐>
<el‐upload
class="avatar‐uploader"
action="/setmeal/upload.do"
:auto‐upload="autoUpload"
name="imgFile"
:show‐file‐list="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>

（3）定义对应的钩子函数：

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

//文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的
js对象
handleAvatarSuccess(response, file) {
this.imageUrl = "http://pqjroc654.bkt.clouddn.com/"+response.data;
this.$message({
message: response.message,
type: response.flag ? 'success' : 'error'
});
//设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
this.formData.img = response.data;
}
//上传文件之前的钩子
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;
}

（4）创建SetmealController，接收上传的文件

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

package com.itheima.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.PageResult;
import com.itheima.entity.QueryPageBean;
import com.itheima.entity.Result;
import com.itheima.pojo.CheckGroup;
import com.itheima.pojo.Setmeal;
import com.itheima.service.CheckGroupService;
import com.itheima.service.SetmealService;
import com.itheima.utils.QiniuUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.List;
import java.util.UUID;
/**
* 套餐管理
*/
@RestController
@RequestMapping("/setmeal")
public class SetmealController {
@Reference
private SetmealService setmealService;
//图片上传
@RequestMapping("/upload")
public Result upload(@RequestParam("imgFile")MultipartFile imgFile){
try{
//获取原始文件名
String originalFilename = imgFile.getOriginalFilename();
int lastIndexOf = originalFilename.lastIndexOf(".");
//获取文件后缀
String suffix = originalFilename.substring(lastIndexOf ‐ 1);//使用UUID随机产生文件名称，防止同名文件覆盖
String fileName = UUID.randomUUID().toString() + suffix;
QiniuUtils.upload2Qiniu(imgFile.getBytes(),fileName);
//图片上传成功
Result result = new Result(true,
MessageConstant.PIC_UPLOAD_SUCCESS);
result.setData(fileName);
return result;
}catch (Exception e){
e.printStackTrace();
//图片上传失败
return new Result(false,MessageConstant.PIC_UPLOAD_FAIL);
}
}
}

注意：别忘了在spring配置文件中配置文件上传组件

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

<!‐‐文件上传组件‐‐>
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver
">
<property name="maxUploadSize" value="104857600" />
<property name="maxInMemorySize" value="4096" />
<property name="defaultEncoding" value="UTF‐8"/>
</bean>

帐号		自动登录	找回密码
密码			加入黑马

[资源下载] 【郑州校区】传智健康项目讲义第四章 五

0 个回复

[资源下载] 【郑州校区】传智健康项目讲义第四章五