vue代码 查看图片 上一张下一张前后切换图片的实现
<el-table-column label="头像" width="100" align="center"><template slot-scope="scope"><el-imagev-if="scope.row.avatar!=null && scope.row.avatar!=''"style="width: 20px; height: 20px":src="scope.row.avatar":preview-src-list="srcList"@click="openImage(scope.row,0)"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image><div v-else>无</div></template></el-table-column><!--临时用其他字段当作存放图片字段--><el-table-column label="头像1" width="100" align="center"><template slot-scope="scope"><el-imagev-if="scope.row.intro!=null && scope.row.intro!=''"style="width: 20px; height: 20px":src="scope.row.intro":preview-src-list="srcList1"@click="openImage(scope.row,0)"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image><div v-else>无</div></template></el-table-column>
srcList:[],srcList1: [],srcList2: [],
具体实现
openImage(row, type) {this.srcList1 = [row.avatar,row.intro];this.srcList2 = [];for (let i = 0; i < this.srcList1.length; i++) {this.srcList2[i] = this.srcList1[(type + i) % this.srcList1.length];}this.srcList = [];for (let i = 0; i < this.srcList2.length; i++) {if (this.srcList2[i] != null && this.srcList2[i] != "") {this.srcList.push(this.srcList2[i]);}}},
后台代码 ( 新增oss )
controller
@RequestMapping("instantOssFile")public R instantOssFile(MultipartFile file){String url= os.instantOssFileAvatar(file);return R.ok().data("url",url);}
service
String instantOssFileAvatar(MultipartFile file);
serviceImpl
@Servicepublic class ossServerImpl implements ossServer{@Overridepublic String instantOssFileAvatar(MultipartFile file) {// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-。String endpoint = ossUtils.END_POINT;// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。String accessKeyId = ossUtils.KEY_ID;String accessKeySecret = ossUtils.KEY_SECRET;String bucketName = ossUtils.BUCKET_NAME;// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);try {// 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。(获取文件的输入流)InputStream inputStream = file.getInputStream();//获取文件名字(没有改之前的)String fileName = file.getOriginalFilename().replace("/", "");String uuidName = UUID.randomUUID().toString().replace("-", "");fileName=uuidName+fileName;String datePate = new DateTime().toString("yyyy/MM/dd");fileName=datePate+"/"+fileName;/*** 调用oss 实现上传* 第一个参数 bucket 的名字* 第二个参数 是文件路径喝name* 第三个是文件输入流*/ossClient.putObject(bucketName,fileName , inputStream);/*https://joe-world.oss-cn-*/String url="https://"+bucketName+"."+endpoint+"/"+fileName;return url;} catch (Exception e) {e.printStackTrace();}finally {// 关闭OSSClient。ossClient.shutdown();}return null;}}
String endpoint = ossUtils.END_POINT;String accessKeyId = ossUtils.KEY_ID;String accessKeySecret = ossUtils.KEY_SECRET;String bucketName = ossUtils.BUCKET_NAME;这些要用自己的
创建自己的bucket
创建完成后找到自己刚创建的 bucket
复制名字 对应 BUCKET_NAME
进入 查看概述
地域节点对应 END_POINT
鼠标放到右上角你的头像 上 出现这个 AccessKey 点进去
创建
查看复制 对应 KEY_ID 和 KEY_SECRET
后台写好后回到前台 写新增图片的方法
待补充~~
