淄博团购网站建设,大型网站建设定制,石景山网站建设,百度给做网站收费多少钱分布式文件系统 SpringBootFastDFSVue.js【二】 六、实现上传功能并展示数据6.1.创建数据库6.2.创建spring boot项目fastDFS-java6.3.引入依赖6.3.fastdfs-client配置文件6.4.跨域配置GlobalCrosConfig.java6.5.创建模型--实体类6.5.1.FastDfsFile.java6.5.2.FastDfsFileType.j… 分布式文件系统 SpringBootFastDFSVue.js【二】 六、实现上传功能并展示数据6.1.创建数据库6.2.创建spring boot项目fastDFS-java6.3.引入依赖6.3.fastdfs-client配置文件6.4.跨域配置GlobalCrosConfig.java6.5.创建模型--实体类6.5.1.FastDfsFile.java6.5.2.FastDfsFileType.java6.5.3.PageBean.java6.5.4.R.java6.5.5.Result.java 6.6.创建application.yml6.7.创建Service6.7.1.FastDfsFileService6.7.2.FastDfsFileServiceImpl6.7.3.FastDfsFileTypeService6.7.4.FastDfsFileTypeServiceImpl 6.8.创建Mapper6.8.1.FastDfsFileMapper6.8.2.FastDfsFileMapper.xml6.8.3.FastDfsFileTypeMapper6.8.4.FastDfsFileTypeMapper.xml 6.9.创建fastDFS客户端6.10.创建全局异常处理器6.11.创建Controller6.13.创建vue2项目6.14.安装相关模块6.15.main.js6.16.src/router/index.js6.17.src/utils/request.js6.18.src/api/fastdfs/fast.js6.19.上传图片页面fastdfsuploadimg.vue6.20.图片管理页面fastdfsimg.vue6.21.效果演示 endl 六、实现上传功能并展示数据 6.1.创建数据库
CREATE DATABASE IF NOT EXISTS fastdfs CHARACTER SET utf8mb4;show databases;USE fastdfs;CREATE TABLE fast_dfs_file (id bigint(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT 主键,file_id varchar(200) NOT NULL COMMENT 文件的fileId,file_path varchar(200) NOT NULL COMMENT 文件路径,file_size bigint(25) NOT NULL COMMENT 文件大小,file_name varchar(25) NOT NULL COMMENT 文件名,ext varchar(30) NOT NULL COMMENT 文件的扩展名,不包含.,file_type varchar(50) NOT NULL COMMENT 文件类型,create_time datetime DEFAULT NULL COMMENT 创建时间,update_time datetime DEFAULT NULL COMMENT 最后修改时间
) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT文件表;CREATE TABLE fast_dfs_file_type (id bigint(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT 主键,file_type varchar(50) NOT NULL COMMENT 文件类型,create_time datetime DEFAULT NULL COMMENT 创建时间,update_time datetime DEFAULT NULL COMMENT 最后修改时间
) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT文件类型表;insert into fast_dfs_file_type(file_type)values(image/jpeg),(image/png),(image/jpg);6.2.创建spring boot项目fastDFS-java
6.3.引入依赖
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.5/versionrelativePath//parentgroupIdcom.orange/groupIdartifactIdfastDFS-java/artifactIdversion0.0.1-SNAPSHOT/versiondependencies!--web起步依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!--fastdfs-client-java依赖需要自己手动打包上传到本地仓库--dependencygroupIdorg.csource/groupIdartifactIdfastdfs-client-java/artifactIdversion1.31-SNAPSHOT/version/dependency!--mybatis起步依赖--dependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.2.2/version/dependency!--mysql驱动--dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdscoperuntime/scope/dependency!--lombok--dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependency!--springboot单元测试--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!--pagehelper分页插件--dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.4.2/version/dependencydependencygroupIdorg.apache.commons/groupIdartifactIdcommons-io/artifactIdversion1.3.2/version/dependencydependencygroupIdcommons-fileupload/groupIdartifactIdcommons-fileupload/artifactIdversion1.4/version/dependency!--druid--dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion1.2.8/version/dependency!--json处理器--dependencygroupIdcom.google.code.gson/groupIdartifactIdgson/artifactId/dependency!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --!--fastJson是一个JSON的处理工具包由阿里巴巴公司研发推出。我们使用它将List或者Map转换成JSON对象--dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.47/version/dependencydependencygroupIdcom.auth0/groupIdartifactIdjava-jwt/artifactIdversion3.2.0/version/dependency!--shiro安全依赖包--dependencygroupIdorg.apache.shiro/groupIdartifactIdshiro-spring/artifactIdversion1.4.0/version/dependency/dependenciesbuild!--项目打包时会将Java目录中的*.xml文件也进行打包--resourcesresourcedirectorysrc/main/java/directoryincludesinclude**/*.xml/include/includesfilteringfalse/filtering/resource/resourcespluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project6.3.fastdfs-client配置文件
## fastdfs-client.properties#fastDFS连接超时时间针对socket套接字函数connect
connect_timeout_in_seconds 5
#fastDFS网络超时时间
network_timeout_in_seconds 30#编码格式
charset UTF-8#是否启用token验证(针对fdfs配置文件/etc/fdfs/http.conf防盗链)
http_anti_steal_token false
#连接密钥(http.conf要配置一样的密钥)
http_secret_key FastDFS1234567890
#tracker服务器访问端口
http_tracker_http_port 80#tracker服务器地址多个以逗号隔开
fastdfs.tracker_servers 192.168.229.141:221226.4.跨域配置GlobalCrosConfig.java
/*** 跨域配置文件**/
Configuration
public class GlobalCrosConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**)// 对所有路径应用跨域配置,所有的当前站点的请求地址都支持跨域访问。//是否发送Cookie.allowCredentials(true)//放行哪些原始域.allowedHeaders(*).allowedMethods(POST, GET, HEAD, PUT, OPTIONS, DELETE).allowedOriginPatterns(*)// 所有的外部域都可跨域访问。// 如果是localhost则很难配置因为在跨域请求的时候外部域的解析可能是localhost、127.0.0.1、主机名.maxAge(3600);// 超时时长设置为1小时。 时间单位是秒。}
}/*
Configuration
public class GlobalCrosConfig {Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) //添加映射路径“/**”表示对所有的路径实行全局跨域访问权限的设置//.allowedOrigins(*) //开放哪些ip、端口、域名的访问权限.allowedOriginPatterns(*) //开放哪些ip、端口、域名的访问权限.allowCredentials(true) //是否允许发送Cookie信息.allowedMethods(GET, POST, PUT, DELETE) //开放哪些Http方法允许跨域访问.allowedHeaders(*) //允许HTTP请求中的携带哪些Header信息.exposedHeaders(*); //暴露哪些头部信息因为跨域访问默认不能获取全部头部信息}};}
}*/6.5.创建模型–实体类
6.5.1.FastDfsFile.java
/*** 文件类*/
Data
NoArgsConstructor
AllArgsConstructor
Repository
public class FastDfsFile {private Long id;private String fileId;//文件的fileIdprivate String filePath;//文件路径private Long fileSize;//文件大小private String fileName;//文件名private String ext;//文件的扩展名,不包含.private String fileType;//文件类型private LocalDateTime createTime; //创建时间private LocalDateTime updateTime; //修改时间
}6.5.2.FastDfsFileType.java
/*** 文件类型表*/
Data
NoArgsConstructor
AllArgsConstructor
Repository
public class FastDfsFileType {private Long id;private String fileType;//文件类型private LocalDateTime createTime; //创建时间private LocalDateTime updateTime; //修改时间
}6.5.3.PageBean.java
/*** 分页查询结果的封装类*/
Data
NoArgsConstructor
AllArgsConstructor
public class PageBeanT {//当前页数private int currPageNo;//每页显示的记录数private int pageSize;//总记录数private int totalCount;//总页数总条数/每页显示的条数private int totalPage;//每页的显示的数据private ListT lists;
}6.5.4.R.java
Data
Accessors(chain true) //对R进行链式操作
public class R {private Integer code;//响应码private String message;//响应消息private MapString,Object datanew HashMap();public static R ok(){R r new R();r.setCode(0);r.setMessage(成功);return r;}public static R error(){R r new R();r.setCode(-1);r.setMessage(失败);return r;}public R data(String key,Object value){this.data.put(key, value);return this;}
}6.5.5.Result.java
Data
NoArgsConstructor
AllArgsConstructor
public class Result {private Integer code;//响应码1 代表成功; 0 代表失败private String msg; //响应信息 描述字符串private Object data; //返回的数据//增删改 成功响应public static Result success(){return new Result(1,success,null);}//查询 成功响应public static Result success(Object data){return new Result(1,success,data);}//失败响应public static Result error(String msg){return new Result(0,msg,null);}
}6.6.创建application.yml
server:port: 9090#Mybatis配置
mybatis:configuration: #sql日志log-impl: org.apache.ibatis.logging.stdout.StdOutImpl#驼峰命名map-underscore-to-camel-case: truemapper-locations: classpath:com/orange/fastdfs/mapper/*.xml#spring事务管理日志
logging:level:org.springframework.jdbc.support.JdbcTransactionManager: debugspring:#数据库连接信息datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://192.168.229.141:3306/fastdfs?characterEncodingutf-8useSSLfalseusername: rootpassword: 123456jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT8
# 文件上传的配置
# linux临时文件目录
# mkdir -p /data/tmp/updatefileservlet:multipart:location: /data/tmp/updatefilemax-file-size: 10MBmax-request-size: 10MB6.7.创建Service
6.7.1.FastDfsFileService
public interface FastDfsFileService {void save(FastDfsFile fastDfsFile);void updateById(FastDfsFile fastDfsFile);FastDfsFile selectById(Long id);Long selectByFileId(String fileId);int deleteFastDfsFileById(Long id);ListFastDfsFile selectAll();PageBeanFastDfsFile findFastDfsFileByPage(int currPageNo, int pageSize);
}6.7.2.FastDfsFileServiceImpl
Service
public class FastDfsFileServiceImpl implements FastDfsFileService {Resourceprivate FastDfsFileMapper fastDfsFileMapper;/*** 存储数据** param fastDfsFile*/Overridepublic void save(FastDfsFile fastDfsFile) {fastDfsFileMapper.insert(fastDfsFile);}Overridepublic void updateById(FastDfsFile fastDfsFile) {fastDfsFileMapper.updateById(fastDfsFile);}Overridepublic FastDfsFile selectById(Long id) {return fastDfsFileMapper.selectById(id);}/*** 根据fileId查询id** param fileId* return*/Overridepublic Long selectByFileId(String fileId) {return fastDfsFileMapper.selectByFileId(fileId);}/*** 根据id删除** param id* return*/Overridepublic int deleteFastDfsFileById(Long id) {return fastDfsFileMapper.deleteById(id);}/*** 查询所有** return*/Overridepublic ListFastDfsFile selectAll() {return fastDfsFileMapper.selectAll();}Overridepublic PageBeanFastDfsFile findFastDfsFileByPage(int currPageNo, int pageSize) {PageBeanFastDfsFile pageBean new PageBean();//封装当前页数pageBean.setCurrPageNo(currPageNo);//每页显示的条数pageBean.setPageSize(pageSize);//总记录数int totalCount fastDfsFileMapper.selectCount();pageBean.setTotalCount(totalCount);//总页数总条数/每页显示的条数Double num Math.ceil(totalCount / pageSize);int totalPage num.intValue();pageBean.setTotalPage(totalPage);int offset (currPageNo - 1) * pageSize;int limit pageBean.getPageSize();//封装每页显示的数据ListFastDfsFile list fastDfsFileMapper.findeByPage(offset, limit);pageBean.setLists(list);return pageBean;}
}6.7.3.FastDfsFileTypeService
public interface FastDfsFileTypeService {int selectByFileType(String fileType);
}6.7.4.FastDfsFileTypeServiceImpl
Service
public class FastDfsFileTypeServiceImpl implements FastDfsFileTypeService {Resourceprivate FastDfsFileTypeMapper fastDfsFileTypeMapper;Overridepublic int selectByFileType(String fileType) {return fastDfsFileTypeMapper.select(fileType);}
}6.8.创建Mapper
6.8.1.FastDfsFileMapper
Mapper
public interface FastDfsFileMapper {void insert(FastDfsFile fastDfsFile);Long selectByFileId(String fileId);int deleteById(Long id);ListFastDfsFile selectAll();int selectCount();ListFastDfsFile findeByPage(int offset, int limit);void updateById(FastDfsFile fastDfsFile);FastDfsFile selectById(Long id);
}6.8.2.FastDfsFileMapper.xml
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.orange.fastdfsjava.mapper.FastDfsFileMapperinsert idinsert parameterTypecom.orange.fastdfsjava.pojo.FastDfsFileinsert into fast_dfs_file(file_id, file_path, file_size, ext, file_name, file_type, create_time, update_time)values (#{fileId}, #{filePath}, #{fileSize}, #{ext}, #{fileName}, #{fileType}, #{createTime}, #{updateTime})/insertupdate idupdateByIdupdate fast_dfs_fileset file_id #{fileId},file_path #{filePath},file_size #{fileSize},ext #{ext},file_name #{fileName},file_type #{fileType},create_time #{createTime},update_time #{updateTime}where id #{id}/updatedelete iddeleteByIddeletefrom fast_dfs_filewhere id #{id}/deleteselect idselectByFileId resultTypejava.lang.Longselect idfrom fast_dfs_filewhere file_id #{fileId}/selectselect idselectAll resultTypecom.orange.fastdfsjava.pojo.FastDfsFileselect *from fast_dfs_file/selectselect idselectCount resultTypejava.lang.Integerselect count(*)from fast_dfs_file/selectselect idfindeByPage resultTypecom.orange.fastdfsjava.pojo.FastDfsFileselect *from fast_dfs_file limit #{offset},#{limit}/selectselect idselectById resultTypecom.orange.fastdfsjava.pojo.FastDfsFileselect *from fast_dfs_filewhere id #{id}/select/mapper6.8.3.FastDfsFileTypeMapper
Mapper
public interface FastDfsFileTypeMapper {int select(String fileType);
}6.8.4.FastDfsFileTypeMapper.xml
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.orange.fastdfsjava.mapper.FastDfsFileTypeMapperselect idselect resultTypejava.lang.Integerselect count(*)from fast_dfs_file_typewhere file_type #{fileType}/select
/mapper6.9.创建fastDFS客户端
Slf4j
public class FastDFSClient {static {//加载fastDFS客户端的配置文件try {ClientGlobal.initByProperties(config/fastdfs-client.properties);log.info(network_timeout {} ms, ClientGlobal.g_network_timeout);log.info(charset {}, ClientGlobal.g_charset);} catch (IOException e) {e.printStackTrace();} catch (MyException e) {e.printStackTrace();}}/*** 上传文件* param file* param fastDFSFile* return* throws IOException*/public static FastDfsFile upload(MultipartFile file, FastDfsFile fastDFSFile) throws IOException {byte[] file_buff null;//把文件转成输入流InputStream inputStream file.getInputStream();if (inputStream ! null) {//获取输入流中可读取的数据大小int len inputStream.available();//创建足够大的缓冲区file_buff new byte[len];//一次性把输入流中的数据全都读入到缓冲区file_buff,那file_buff就要足够大,占用内存也会很大inputStream.read(file_buff);}//关闭输入流inputStream.close();//通过fastDSF的client代码访问tracker和storagetry {//创建tracker的客户端TrackerClient trackerClient new TrackerClient(ClientGlobal.getG_tracker_group());//通过TrackerClient对象获取TrackerServer信息TrackerServer trackerServer trackerClient.getTrackerServer();StorageServer storageServer null;//定义storage的客户端,建立与Storage服务器的连接StorageClient1 storageClient new StorageClient1(trackerServer, storageServer);//文件元信息NameValuePair[] metaList new NameValuePair[1];metaList[0] new NameValuePair(fileName, fastDFSFile.getFileName());//执行上传String fileId storageClient.upload_file1(file_buff, fastDFSFile.getExt(), metaList);log.info(upload success. file id is: {}, fileId);fastDFSFile.setFileId(fileId);fastDFSFile.setFilePath(fileId);fastDFSFile.setFileSize(file.getSize());fastDFSFile.setCreateTime(LocalDateTime.now());fastDFSFile.setUpdateTime(LocalDateTime.now());//通过调用service及dao将文件的路径存储到数据库中//关闭storage客户端storageClient.close();return fastDFSFile;} catch (Exception e) {log.error(上传文件失败, e);e.printStackTrace();return null;}}}6.10.创建全局异常处理器
/*** 全局异常处理器*/
RestControllerAdvice
public class GlobalExceptionHandler {ExceptionHandler(Exception.class) //捕获所有的异常public Result ex(Exception ex){ex.printStackTrace();return Result.error(对不起操作失败请联系管理员);}}6.11.创建Controller
Slf4j
RestController
RequestMapping(/fastDFSFile)
public class FileServerController {Resourceprivate FastDfsFileService fastDfsFileService;Resourceprivate FastDfsFileTypeService fastDfsFileTypeService;PostMapping(/upload)ResponseBodypublic R upload(RequestParam(file) MultipartFile file) throws IOException {//将文件先存储在web服务器上(本机),在调用fastDFS的client将文件上传到 fastDFS服务器FastDfsFile fastDFSFile new FastDfsFile();String contentType file.getContentType();//检验当前文件是否在上述集合中log.info(上传的文件类型为{}, contentType);int count fastDfsFileTypeService.selectByFileType(contentType);if (count 1) {log.info(不支持此文件类型上传 : {}, contentType);return R.error().setCode(208).setMessage(不支持此文件类型上传 : contentType);}log.info(此文件类型为 : {}, contentType);fastDFSFile.setFileType(contentType);//文件原始名称String originalFilename file.getOriginalFilename();log.info(原始文件名称 : {}, originalFilename);fastDFSFile.setFileName(originalFilename);//文件扩展名比如22.jpgString filenameExtension StringUtils.getFilenameExtension(originalFilename);log.info(文件类型 {}, filenameExtension);//jpgif (filenameExtension null) {return R.error().setCode(208).setMessage(此文件没有文件扩展名);}fastDFSFile.setExt(filenameExtension);//新文件名称String fileName UUID.randomUUID().toString().replace(-, ) . filenameExtension;log.info(新文件名称 {}, fileName);FastDfsFile fastDfsFile1 FastDFSClient.upload(file, fastDFSFile);if (fastDfsFile1 ! null) {fastDfsFileService.save(fastDfsFile1);Long id fastDfsFileService.selectByFileId(fastDfsFile1.getFileId());fastDfsFile1.setId(id);return R.ok().setCode(200).setMessage(上传成功).data(fastDfsFile,fastDfsFile1);}return R.error().setCode(208).setMessage(上传失败);}GetMapping(/getPageFastImg/{page}/{limit})public R getPageFastImg(PathVariable int page, PathVariable int limit) {PageBeanFastDfsFile pageBean fastDfsFileService.findFastDfsFileByPage(page, limit);return R.ok().setCode(200).setMessage(查询成功).data(pageBean,pageBean);}
}6.13.创建vue2项目 6.14.安装相关模块
npm install axios1.5.0
npm install vue-axios
npm install vue-router3.0.1
npm i element-ui -S6.15.main.js
import App from ./App.vue
//引入Vue
import Vue from vue
//引入axios
import axios from axios
//引入VueAxios
//安装VueAxios模块后不需要在每个组件中单独导入axios只需将axios请求改为this.axios
import VueAxios from vue-axios
//引入VueRouter
import VueRouter from vue-router
//完整引入
//引入ElementUI组件库
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css
//新建一个router文件夹在文件夹下新建一个index.js文件
//引入路由器
import router from ./router/index// 设置全局变量
Vue.prototype.$baseImagePath http://192.168.229.141
//this.$baseImagePath直接引用
//把axios挂载到vue上
Vue.prototype.$axios axios;
//使用Vue.use来注册安装插件
Vue.use(VueRouter)
Vue.use(router)
Vue.use(VueAxios, axios)
//使用ElementUI组件库
Vue.use(ElementUI)
//关闭Vue的生产提示
Vue.config.productionTip false// 创建和挂载根实例
new Vue({router, //将路由器注入到new Vue实例中建立关联render: h h(App), //将App组件放入容器中data: {// 空的实例放到根组件下所有的子组件都能调用Bus: new Vue()}
}).$mount(#app);6.16.src/router/index.js
//在路由文件router/index.js中配置
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router;//引入组件
import fastdfsuploadimg from ../view/fastdfs/fastdfsuploadimg//上传页
import fastdfsimg from ../view/fastdfs/fastdfsimg//创建路由
const routes [//定义路由{path: /,name: fastdfsuploadimg,component: fastdfsuploadimg},{path: /fastdfsimg,name: fastdfsimg,component: fastdfsimg},
]//创建并暴露一个路由器
const router new VueRouter({mode: history,base: process.env.BASE_URL,routes
})export default router6.17.src/utils/request.js
import axios from axios// 创建axios实例
const service axios.create({baseURL: http://localhost:9090, // api 的 base_urltimeout: 1000000 // 请求超时时间
})// http request 拦截器
// 请求拦截器
service.interceptors.request.use(config {// 可以在这里添加请求头等信息return config;},error {// 请求错误处理console.log(error);return Promise.reject(error);}
);// http response 拦截器
// 响应拦截器
service.interceptors.response.use(response {// 对响应数据做处理例如只返回data部分const data response.data;return data;},error {// 响应错误处理console.log(err error); // for debugreturn Promise.reject(error);}
);export default service;6.18.src/api/fastdfs/fast.js
import request from ../../utils/request;const api_name /fastDFSFileexport default {//上传图片uploadImg() {return request({url: ${api_name}/upload,method: post,})},getPageFastImg(page, limit) {return request({url: ${api_name}/getPageFastImg/${page}/${limit},method: get,})},
}6.19.上传图片页面fastdfsuploadimg.vue
templatedivh2上传图片/h2el-formel-form-itemel-uploadlist-typepicture-card:multiplefalse:actionuploadUrl:limit1:on-successonUploadSuccessIdCardi classel-icon-plus/i/el-upload/el-form-item/el-formspan v-ifdialogImageUrl ! 图片地址a target_blank v-ifdialogImageUrl ! :hrefdialogImageUrl{{ dialogImageUrl }}/a/spanbr//div
/templatescript
import service from ../../utils/request;export default {name: UploadImg,data() {return {dialogImageUrl: ,file_id: ,dialogVisible: false,//uploadUrl: http://localhost:9090/fastDFSFile/upload, //文件上传地址uploadUrl: , //文件上传地址datas: {},};},created() {this.uploadUrl service.defaults.baseURL /fastDFSFile/upload},methods: {onUploadSuccessIdCard(response) {this.file_id response.data.fastDfsFile.fileId;this.datas response.fastDfsFile.data;//this.dialogImageUrl http://192.168.229.141/ response.data.fastDfsFile.filePath;this.dialogImageUrl this.$baseImagePath/ response.data.fastDfsFile.filePath;},},},
};
/scriptstyle scoped
/style6.20.图片管理页面fastdfsimg.vue
templatedivh2图片管理/h2!--图片列表--el-tablesizesmallstylemargin: 30px;empty-text无数据:dataimgListhighlight-current-row v-loadingloading border element-loading-text拼命加载中el-table-column aligncenter sortable propfilePath label文件路径 width450/el-table-columnel-table-column aligncenter sortable propfileSize label文件大小 width100/el-table-columnel-table-column aligncenter sortable propfileName label文件名 width130/el-table-columnel-table-column aligncenter sortable propext label扩展名 width100/el-table-columnel-table-column aligncenter sortable propfileType label文件类型 width100/el-table-columnel-table-column aligncenter sortable propfilePath label预览图片 width100template slot-scopescopeimg :srcgetImageUrl(scope.row.filePath) stylemax-width: 100px;max-height: 100px alt图标//template/el-table-column/el-table!-- 分页 --el-pagination classpagination styletext-align: center;margin-top: 50pxlayoutprev, pager, next:current-pagepage:totaltotal:page-sizelimit/el-pagination/div
/templatescript
import fastApi from /api/fastdfs/fast;export default {name: FastdfsImg,data() {return {total: 0, // 数据库中的总记录数page: 1, // 默认页码limit: 5, // 每页记录数imgList: {},//baseImagePath: http://192.168.229.141/, // 图片的基础路径}},created() {this.init()},methods: {init() {fastApi.getPageFastImg(this.page, this.limit).then(response {this.imgList response.data.pageBean.liststhis.total response.data.pageBean.totalCount})},getImageUrl(filePath) {//return ${this.imagePath}${filePath}; // 拼接图片路径return this.$baseImagePath / filePath; // 拼接图片路径},},
}
/scriptstyle scoped/style6.21.效果演示 endl
