添加图片上传

src/views/school-center/packageManagement/package.vue

@@ -75,12 +75,15 @@
                 </a-form-item>
                 <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="背景图">
                     <a-upload
+                            ref="upload"
                             :action=uploadUrl
                             listType="picture-card"
                             :fileList="fileList"
                             :headers="header"
                             @preview="handlePreview"
                             @change="handleChange"
+                            :data="fileid"
+                            accept=".jpg"
                     >
                         <div>
                             <a-icon type="plus" />
@@ -92,7 +95,25 @@
                     </a-modal>
                 </a-form-item>
                 <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>
         </a-modal>
@@ -119,7 +140,14 @@
                 previewImage: '',
                 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'}),
                 //输入框列表
                 autoCompleteResult:[],
@@ -184,22 +212,29 @@
             }
         },
         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; //获取当前环境
                 let apis = "/";
                 if(env === 'development'){     //测试环境默认添加前缀
                     apis = '/api/';
                 }
-                return apis + this.brackgroundurl
+                return apis
             },
-            //生成随机数
-            guid() {
-                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);
-                });
+            xiaotuuploadUrl(){
+                return this.baseuploadUrl() + this.xiaotuurl
             },
+            uploadUrl(){
+                return this.baseuploadUrl() + this.brackgroundurl
+            }
+            ,
+            //背景图
             handleCancel() {
                 this.previewVisible = false;
             },
@@ -207,12 +242,30 @@
                 this.previewImage = file.url || file.thumbUrl;
                 this.previewVisible = true;
             },
-            handleChange({ fileList }) {
-                console.log(fileList)
-                this.fileList = fileList;
-            },
+            handleChange(obj) {
+                if (this.fileList.length==2){
+                    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() {
                 this.$refs.table.refresh({search: true})
             },
@@ -230,6 +283,7 @@
                 })
             },
             add(){
+                this.fileid={id:""}
                 this.modifyvisible=true
                 this.modifyForm.id=""
                 this.titleName="添加"
@@ -246,6 +300,30 @@
             },
             modifyfunction(data){
                 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.modifyvisible=true
                 setTimeout(()=>{
@@ -306,6 +384,8 @@
                 })
             },
             createfunctionCancel(){
+                this.fileList=[]
+                this.fileListxiaotu=[]
                 this.modifyvisible=false
                 this.autoCompleteResult=[]
                 this.Formtable.setFieldsValue({