peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

https://github.com/rymcu/nebula/issues/75

Browse Source 
fix-上传后图片可以直接提交
This commit is contained in:
ronger 2022-12-19 22:38:55 +08:00 committed by GitHub
commit 2e75e14f5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
pages/portfolio/post/_portfolio_id.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-row class="wrapper"> <el-row class="wrapper">
<el-col v-if="isAuthor"> <el-col v-if="isAuthor">
<el-col v-if="isEdit" style="margin-bottom: 1rem;"> <el-col style="margin-bottom: 1rem;" v-if="isEdit">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }} <el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
</el-breadcrumb-item> </el-breadcrumb-item>
@ -15,23 +15,28 @@
作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点 作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
</el-col> </el-col>
<el-col> <el-col>
<el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px"> <el-form :model="portfolio" :rules="rules" label-width="100px" ref="topic">
<el-form-item label="作品集名称" prop="portfolioTitle"> <el-form-item label="作品集名称" prop="portfolioTitle">
<el-input v-model="portfolio.portfolioTitle"></el-input> <el-input v-model="portfolio.portfolioTitle"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="作品集介绍" prop="portfolioDescription">
<div id="contentEditor"></div>
</el-form-item>
<el-form-item> <el-form-item>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<vue-cropper <vue-cropper
ref="cropper"
:aspect-ratio="1 / 1" :aspect-ratio="1 / 1"
:src="headImgUrl" :autoCrop="autoCrop"
:autoCropArea="1"
:fixedNumber="[1,2]"
:checkCrossOrigin="false" :checkCrossOrigin="false"
:checkOrientation="false" :checkOrientation="false"
:imgStyle="{width: '480px', height: '480px'}" :imgStyle="{'width': '200px'}"
:autoCropArea="1" :src="headImgUrl"
:autoCrop="autoCrop"
preview=".preview" preview=".preview"
ref="cropper"
v-if="headImgUrl"
/> />
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
@ -51,18 +56,18 @@
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
<el-upload <el-upload
class="avatar-uploader" :before-upload="beforeAvatarUpload"
action="" :http-request="requestUpload"
:multiple="true" :multiple="true"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess" action=""
:before-upload="beforeAvatarUpload"> class="avatar-uploader">
<div> <div>
<el-button type="primary" round plain>上传</el-button> <el-button plain round type="primary">上传</el-button>
</div> </div>
</el-upload> </el-upload>
<el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button> <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置</el-button>
<el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button> <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
<el-col> <el-col>
<span style="color: red;padding-right: 5px;">*</span> <span style="color: red;padding-right: 5px;">*</span>
<span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span> <span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
@ -71,24 +76,21 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
<el-form-item label="作品集介绍" prop="portfolioDescription">
<div id="contentEditor"></div>
</el-form-item>
<el-form-item class="text-right"> <el-form-item class="text-right">
<el-button v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button> <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
<el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button> <el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
<el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button> <el-button @click="updatePortfolio" v-else>提交</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
</el-col> </el-col>
<el-col v-else class="text-center"> <el-col class="text-center" v-else>
<el-alert <el-alert
title="用户无权限" :closable="false"
type="warning"
center center
show-icon show-icon
:closable="false"> title="用户无权限"
type="warning">
</el-alert> </el-alert>
</el-col> </el-col>
</el-row> </el-row>
@ -171,6 +173,10 @@ export default {
} }
}, },
methods: { methods: {
// 覆盖默认的上传行为
requestUpload(e) {
console.log('e', e)
},
_initEditor(data) { _initEditor(data) {
let _ts = this; let _ts = this;
@ -257,18 +263,18 @@ export default {
placeholder: data.placeholder, placeholder: data.placeholder,
}) })
}, },
handleAvatarSuccess(res) { // handleAvatarSuccess(res) {
let _ts = this; // let _ts = this;
if (res && res.data && res.data.url) { // if (res && res.data && res.data.url) {
let portfolio = _ts.portfolio; // let portfolio = _ts.portfolio;
portfolio.headImgUrl = res.data.url; // portfolio.headImgUrl = res.data.url;
portfolio.headImgType = '0'; // portfolio.headImgType = '0';
_ts.$set(_ts, 'portfolio', portfolio); // _ts.$set(_ts, 'portfolio', portfolio);
_ts.$set(_ts, 'headImgUrl', res.data.url); // _ts.$set(_ts, 'headImgUrl', res.data.url);
} else { // } else {
_ts.$message.error('上传失败!'); // _ts.$message.error('上传失败!');
} // }
}, // },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'; const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png'; const isPNG = file.type === 'image/png';
@ -282,18 +288,30 @@ export default {
return false; return false;
} }
this.fileToBase64(file); this.fileToBase64(file);
return false;
// this.$set(_ts, 'headImgUrl', res.data.url);
}, },
fileToBase64(file) { fileToBase64(file) {
console.log('我执行了？')
let _ts = this; let _ts = this;
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function () {
let portfolio = _ts.portfolio;
portfolio.headImgUrl = this.result;
portfolio.headImgType = '0';
_ts.$set(_ts, 'portfolio', portfolio);
_ts.$set(_ts, 'headImgUrl', this.result); _ts.$set(_ts, 'headImgUrl', this.result);
_ts.$refs.cropper.replace(this.result); if ((_ts.portfolio.headImgUrl || undefined) != undefined) {
_ts.$message.success('图片上传成功，可自定义裁剪');
} else {
_ts.$message.warning('图片上传失败，请重传');
}
} }
}, },
async updatePortfolio() { async updatePortfolio() {
//headImgUrl
let _ts = this; let _ts = this;
_ts.$set(_ts, 'loading', true); _ts.$set(_ts, 'loading', true);
let id = _ts.idPortfolio; let id = _ts.idPortfolio;
@ -302,6 +320,12 @@ export default {
let data = _ts.portfolio; let data = _ts.portfolio;
data.portfolioDescription = portfolioDescription; data.portfolioDescription = portfolioDescription;
data.portfolioDescriptionHtml = portfolioDescriptionHtml; data.portfolioDescriptionHtml = portfolioDescriptionHtml;
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
this.$message.error('请输入必填信息');
return false
}
let title = id ? '更新' : '添加'; let title = id ? '更新' : '添加';
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) { _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
if (res && res.message) { if (res && res.message) {
@ -437,7 +461,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "~vditor/src/assets/less/index.less"; @import "~vditor/src/assets/less/index.less";
.preview-area { .preview-area {
width: 16rem; width: 16rem;