Skip to content

G
gdtel-gztel-school-center-ui
Commit 7d78878e by 吴学德
Options

添加图片上传

parent 1ab1ac42
Showing with 95 additions and 15 deletions
src/views/school-center/packageManagement/package.vue
...@@ -75,12 +75,15 @@ ...@@ -75,12 +75,15 @@
</a-form-item> </a-form-item>
<a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="背景图"> <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="背景图">
<a-upload <a-upload
ref="upload"
:action=uploadUrl :action=uploadUrl
listType="picture-card" listType="picture-card"
:fileList="fileList" :fileList="fileList"
:headers="header" :headers="header"
@preview="handlePreview" @preview="handlePreview"
@change="handleChange" @change="handleChange"
:data="fileid"
accept=".jpg"
> >
<div> <div>
<a-icon type="plus" /> <a-icon type="plus" />
...@@ -92,7 +95,25 @@ ...@@ -92,7 +95,25 @@
</a-modal> </a-modal>
</a-form-item> </a-form-item>
<a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="小图"> <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="小图">
<img style="width: 150px"> <a-upload
ref="xiaoupload"
:action=xiaotuuploadUrl
listType="picture-card"
:fileList="fileListxiaotu"
:headers="header"
@preview="handlePreviewxiaotu"
@change="handleChangexiaotu"
:data="fileid"
accept=".png"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text"> <span v-if="fileListxiaotu.length==0">上传小图</span> <span v-if="fileListxiaotu.length>0">更换小图</span> </div>
</div>
</a-upload>
<a-modal :visible="previewVisiblexiaotu" :footer="null" @cancel="handleCancelxiaotu">
<img alt="example" style="width: 100%" :src="previewImagexiaotu" />
</a-modal>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
...@@ -119,7 +140,14 @@ ...@@ -119,7 +140,14 @@
previewImage: '', previewImage: '',
fileList: [ fileList: [
], ],
brackgroundurl:"schoolcenter/ciop/packageManagement/package/backgroundUpload",
previewVisiblexiaotu: false,
previewImagexiaotu: '',
fileListxiaotu:[],
fileid:{},
brackgroundurl:"manager/ciop/packageManagement/package/backgroundUpload",
xiaotuurl:"manager/ciop/packageManagement/package/xiaotuUpload",
Formtable: this.$form.createForm(this, {name: 'Formtable'}), Formtable: this.$form.createForm(this, {name: 'Formtable'}),
//输入框列表 //输入框列表
autoCompleteResult:[], autoCompleteResult:[],
...@@ -184,22 +212,29 @@ ...@@ -184,22 +212,29 @@
} }
}, },
methods:{ methods:{
uploadUrl(){ getuuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
baseuploadUrl(){
const env = process.env.NODE_ENV; //获取当前环境 const env = process.env.NODE_ENV; //获取当前环境
let apis = "/"; let apis = "/";
if(env === 'development'){ //测试环境默认添加前缀 if(env === 'development'){ //测试环境默认添加前缀
apis = '/api/'; apis = '/api/';
} }
return apis + this.brackgroundurl return apis
}, },
//生成随机数 xiaotuuploadUrl(){
guid() { return this.baseuploadUrl() + this.xiaotuurl
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}, },
uploadUrl(){
return this.baseuploadUrl() + this.brackgroundurl
}
,
//背景图
handleCancel() { handleCancel() {
this.previewVisible = false; this.previewVisible = false;
}, },
...@@ -207,12 +242,30 @@ ...@@ -207,12 +242,30 @@
this.previewImage = file.url || file.thumbUrl; this.previewImage = file.url || file.thumbUrl;
this.previewVisible = true; this.previewVisible = true;
}, },
handleChange({ fileList }) { handleChange(obj) {
console.log(fileList) if (this.fileList.length==2){
this.fileList = fileList; this.fileList.splice(0,1)
}, }else{
this.fileList = obj.fileList;
}
},
//小图
handleCancelxiaotu() {
this.previewVisiblexiaotu = false;
},
handlePreviewxiaotu(file) {
this.previewImagexiaotu = file.url || file.thumbUrl;
this.previewVisiblexiaotu = true;
},
handleChangexiaotu(obj) {
if (this.fileListxiaotu.length==2){
this.fileListxiaotu.splice(0,1)
}else{
this.fileListxiaotu = obj.fileList;
}
},
search() { search() {
this.$refs.table.refresh({search: true}) this.$refs.table.refresh({search: true})
}, },
...@@ -230,6 +283,7 @@ ...@@ -230,6 +283,7 @@
}) })
}, },
add(){ add(){
this.fileid={id:""}
this.modifyvisible=true this.modifyvisible=true
this.modifyForm.id="" this.modifyForm.id=""
this.titleName="添加" this.titleName="添加"
...@@ -246,6 +300,30 @@ ...@@ -246,6 +300,30 @@
}, },
modifyfunction(data){ modifyfunction(data){
this.modifyForm.id=data.id this.modifyForm.id=data.id
this.fileid={
id:data.id
}
let url=this.baseuploadUrl()+"manager/ciop/packageManagement/package/getbackground/"+data.id
if (!(data.logo == null || data.logo=="")) {
//下载图片浏览
this.fileList.push({
uid: this.getuuid(),
name: '找不到图片',
status: 'done',
url: url,
})
}
//下载图片浏览
if (!(data.logo == null || data.logo == "")) {
let xiaotuurl = this.baseuploadUrl() + "manager/ciop/packageManagement/package/getxiaotu/" + data.id
this.fileListxiaotu.push({
uid: this.getuuid(),
name: '找不到图片',
status: 'done',
url: xiaotuurl,
})
}
this.titleName="编辑" this.titleName="编辑"
this.modifyvisible=true this.modifyvisible=true
setTimeout(()=>{ setTimeout(()=>{
...@@ -306,6 +384,8 @@ ...@@ -306,6 +384,8 @@
}) })
}, },
createfunctionCancel(){ createfunctionCancel(){
this.fileList=[]
this.fileListxiaotu=[]
this.modifyvisible=false this.modifyvisible=false
this.autoCompleteResult=[] this.autoCompleteResult=[]
this.Formtable.setFieldsValue({ this.Formtable.setFieldsValue({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment