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

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

@ -83,7 +83,16 @@ public class PictureService { @@ -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);
}

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

@ -98,7 +98,6 @@ function put(url, data = {}, noMsg, noLoading) { @@ -98,7 +98,6 @@ function put(url, data = {}, noMsg, noLoading) {
if(!noLoading){
loading.start();
}
console.log(url);
_axios.put(url, data).then(
(response: any) => {
handResponse(response, resolve, noMsg, noLoading);
@ -165,11 +164,17 @@ function handError(err, reject, noMsg, noLoading){ @@ -165,11 +164,17 @@ function handError(err, reject, noMsg, noLoading){
reject(err);
}
function upload(file, url){
function upload(file, url, data){
return new Promise((resolve, reject) => {
let param = new FormData() // 创建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 = {
headers: {'Content-Type': 'multipart/form-data'}
}

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

@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
<div id="picture">
<MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)">
<template slot="header">
<el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false"
:show-file-list="false">
<el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess"
:multiple="false" :show-file-list="false">
<el-button :size="$store.state.size" type="success" icon="el-icon-upload">
上传图片
</el-button>
@ -13,9 +13,10 @@ @@ -13,9 +13,10 @@
<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-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">
<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>
</template>
<template slot="extra">
@ -30,6 +31,18 @@ @@ -30,6 +31,18 @@
layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange"
@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>
</template>
@ -50,13 +63,16 @@ @@ -50,13 +63,16 @@
})
export default class Picture extends Vue {
url = 'picture';
imgUrl = 'picture/img';
uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url;
updateImgUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.imgUrl;
flag = {
list: true,
save: false,
update: false,
del: true,
title: true
title: true,
modify: false
}
terms = [{
code: 'remark',
@ -76,7 +92,7 @@ @@ -76,7 +92,7 @@
}]
srcList = [];
row = {};
example = {
page: 1,
size: 20
@ -114,14 +130,19 @@ @@ -114,14 +130,19 @@
})
}
copy(row) {
copy(row, md) {
const that = this;
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 => {
that.$showMessage("success", "复制成功");
that.flag.modify = false;
}, e => {
that.$showMessage("success", "复制失败");
that.flag.modify = false;
})
}
@ -154,6 +175,18 @@ @@ -154,6 +175,18 @@
}).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) {
const that = this
this.$confirm('确定要删除该图片吗?', '提示', {
@ -176,12 +209,12 @@ @@ -176,12 +209,12 @@
console.log(err);
}
onSuccess(response, file, fileList) {
const that = this;
if (response.success == false) {
that.$showMessage('error', response.message, true);
this.$showMessage('error', response.message, true);
} else {
that.query();
that.$showMessage('success', response.message, true)
this.$showMessage('success', response.message, true)
this.query();
this.flag.modify = true;
}
this.$refs.upload.clearFiles();
}
@ -204,8 +237,15 @@ @@ -204,8 +237,15 @@
cancelButtonText: '不用',
type: 'warning'
}).then(() => {
this.$upload(file, this.url).then(rsp => {
if(rsp){
let data = null;
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();
}
});

Loading…
Cancel
Save