Browse Source

新增功能

1.新增复制地址为MarkDown语法
2.新增更新图片内容
master
许孟阳 4 years ago
parent
commit
58e6f0bb28
  1. 12
      java/src/main/java/vip/xumy/picture/ctrl/PictureController.java
  2. 11
      java/src/main/java/vip/xumy/picture/service/PictureService.java
  3. 11
      vue/src/static/plugins/axios.ts
  4. 68
      vue/src/views/biz/picture.vue

12
java/src/main/java/vip/xumy/picture/ctrl/PictureController.java

@ -44,7 +44,7 @@ public class PictureController {
if (userId == null) { if (userId == null) {
rsp.setRows(new ArrayList<Picture>()); rsp.setRows(new ArrayList<Picture>());
rsp.setTotal(0L); rsp.setTotal(0L);
}else { } else {
example.setUser(userId); example.setUser(userId);
Page<Picture> pages = PageHelper.startPage(example.getPage(), example.getSize()); Page<Picture> pages = PageHelper.startPage(example.getPage(), example.getSize());
List<Picture> list = pictureService.list(example); List<Picture> list = pictureService.list(example);
@ -57,7 +57,7 @@ public class PictureController {
@PostMapping @PostMapping
public AjaxResponse save(MultipartFile file, HttpServletRequest request) throws CoreException { public AjaxResponse save(MultipartFile file, HttpServletRequest request) throws CoreException {
String userId = MyUserController.getUserId(request); String userId = MyUserController.getUserId(request);
if(userId == null) { if (userId == null) {
return AjaxResponse.failed("请先登录"); return AjaxResponse.failed("请先登录");
} }
pictureService.save(file, userId); pictureService.save(file, userId);
@ -66,7 +66,13 @@ public class PictureController {
@PutMapping @PutMapping
public AjaxResponse update(@RequestBody Picture picture) throws CoreException { public AjaxResponse update(@RequestBody Picture picture) throws CoreException {
pictureService.update(picture); pictureService.update(null, picture);
return new AjaxResponse(true, "更新成功");
}
@PostMapping("img")
public AjaxResponse updateImg(MultipartFile file, Picture picture) throws CoreException {
pictureService.update(file, picture);
return new AjaxResponse(true, "更新成功"); return new AjaxResponse(true, "更新成功");
} }

11
java/src/main/java/vip/xumy/picture/service/PictureService.java

@ -83,7 +83,16 @@ public class PictureService {
} }
} }
public void update(Picture picture) { public void update(MultipartFile file, Picture picture) throws CoreException {
if(file != null) {
byte[] data;
try {
data = file.getBytes();
writeToFile(picture.getPath(), data);
} catch (IOException e) {
throw new CoreException("图片上传失败");
}
}
pictureMapper.update(picture); pictureMapper.update(picture);
} }

11
vue/src/static/plugins/axios.ts

@ -98,7 +98,6 @@ function put(url, data = {}, noMsg, noLoading) {
if(!noLoading){ if(!noLoading){
loading.start(); loading.start();
} }
console.log(url);
_axios.put(url, data).then( _axios.put(url, data).then(
(response: any) => { (response: any) => {
handResponse(response, resolve, noMsg, noLoading); handResponse(response, resolve, noMsg, noLoading);
@ -165,11 +164,17 @@ function handError(err, reject, noMsg, noLoading){
reject(err); reject(err);
} }
function upload(file, url){ function upload(file, url, data){
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let param = new FormData() // 创建form对象 let param = new FormData() // 创建form对象
param.append('file', file) // 通过append向form对象添加数据 param.append('file', file) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据 if(data){
for (const item in data) {
if (data.hasOwnProperty(item)) {
param.append(item, data[item]) // 添加form表单中其他数据
}
}
}
let config = { let config = {
headers: {'Content-Type': 'multipart/form-data'} headers: {'Content-Type': 'multipart/form-data'}
} }

68
vue/src/views/biz/picture.vue

@ -2,8 +2,8 @@
<div id="picture"> <div id="picture">
<MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)"> <MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)">
<template slot="header"> <template slot="header">
<el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false" <el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess"
:show-file-list="false"> :multiple="false" :show-file-list="false">
<el-button :size="$store.state.size" type="success" icon="el-icon-upload"> <el-button :size="$store.state.size" type="success" icon="el-icon-upload">
上传图片 上传图片
</el-button> </el-button>
@ -13,9 +13,10 @@
<el-row class="image-list" :style="{ height: $store.state.sizes.pTableHei + 'px' }"> <el-row class="image-list" :style="{ height: $store.state.sizes.pTableHei + 'px' }">
<el-col v-for="(item, index) in result.rows" :xs="8" :sm="7" :md="6" :xl="4"> <el-col v-for="(item, index) in result.rows" :xs="8" :sm="7" :md="6" :xl="4">
<el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()" <el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()"
:subTitle="item.time + ' ' + item.space + ' ' + (item.remark ? item.remark : '')"> :subTitle="item.time + ' ' + item.space">
<template slot="icon"> <template slot="icon">
<el-image class="image" :src="$store.state.conf.host + '/' + item.path" :preview-src-list="srcList"> <el-image @contextmenu="modify(item)" class="image" :src="$store.state.conf.host + '/' + item.path"
:preview-src-list="srcList">
</el-image> </el-image>
</template> </template>
<template slot="extra"> <template slot="extra">
@ -30,6 +31,18 @@
layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" /> @current-change="handleCurrentChange" />
<el-dialog :title="row.path" :visible.sync="flag.modify" :close-on-click-modal="false" width="30%">
<el-button :plain="true" type="info" style="width:100%" @click="copy(row, true)">复制为MarkDown语法
</el-button>
<br><br>
<el-button :plain="true" type="success" style="width:100%">
<el-upload class="update-btn" ref="update" :data="row" :action="updateImgUrl" :on-error="onError"
:on-success="onSuccess" :multiple="false" :show-file-list="false">
更新图片内容(ctrl+v)
</el-upload>
</el-button>
</el-dialog>
</div> </div>
</template> </template>
@ -50,13 +63,16 @@
}) })
export default class Picture extends Vue { export default class Picture extends Vue {
url = 'picture'; url = 'picture';
imgUrl = 'picture/img';
uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url; uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url;
updateImgUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.imgUrl;
flag = { flag = {
list: true, list: true,
save: false, save: false,
update: false, update: false,
del: true, del: true,
title: true title: true,
modify: false
} }
terms = [{ terms = [{
code: 'remark', code: 'remark',
@ -76,7 +92,7 @@
}] }]
srcList = []; srcList = [];
row = {};
example = { example = {
page: 1, page: 1,
size: 20 size: 20
@ -114,14 +130,19 @@
}) })
} }
copy(row) { copy(row, md) {
const that = this; const that = this;
const host = this.$store.state.conf.host; const host = this.$store.state.conf.host;
const path = 'http://' + host + "/" + row.path; let path = 'http://' + host + "/" + row.path;
if (md) {
path = "![](" + path + ")";
}
this.$copyText(path).then(e => { this.$copyText(path).then(e => {
that.$showMessage("success", "复制成功"); that.$showMessage("success", "复制成功");
that.flag.modify = false;
}, e => { }, e => {
that.$showMessage("success", "复制失败"); that.$showMessage("success", "复制失败");
that.flag.modify = false;
}) })
} }
@ -154,6 +175,18 @@
}).catch(() => {}) }).catch(() => {})
} }
modify(row) {
this.flag.modify = true;
this.row = row;
//
const that = this;
document.oncontextmenu = function(e) {
if(that.flag.modify){
e.preventDefault();
}
};
}
delate(row) { delate(row) {
const that = this const that = this
this.$confirm('确定要删除该图片吗?', '提示', { this.$confirm('确定要删除该图片吗?', '提示', {
@ -176,12 +209,12 @@
console.log(err); console.log(err);
} }
onSuccess(response, file, fileList) { onSuccess(response, file, fileList) {
const that = this;
if (response.success == false) { if (response.success == false) {
that.$showMessage('error', response.message, true); this.$showMessage('error', response.message, true);
} else { } else {
that.query(); this.$showMessage('success', response.message, true)
that.$showMessage('success', response.message, true) this.query();
this.flag.modify = true;
} }
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
} }
@ -204,8 +237,15 @@
cancelButtonText: '不用', cancelButtonText: '不用',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$upload(file, this.url).then(rsp => { let data = null;
if(rsp){ let url = this.url;
if (that.flag.modify) {
data = this.row;
url = this.imgUrl;
}
this.$upload(file, url, data).then(rsp => {
if (rsp) {
that.flag.modify = true;
that.query(); that.query();
} }
}); });

Loading…
Cancel
Save