添加图片上传

src/views/school-center/management/schoolmanagement.vue

@@ -119,7 +119,25 @@
                     </a-radio-group>
                 </a-form-item>
                 <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="客户二维码">
-                    <img :src="customimg" style="width: 150px">
+                    <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" />
+                            <div class="ant-upload-text"> <span v-if="fileList.length==0">上传二维码</span>  <span v-if="fileList.length>0">更换二维码</span>  </div>
+                        </div>
+                    </a-upload>
+                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+                        <img alt="example" style="width: 100%" :src="previewImage" />
+                    </a-modal>
                 </a-form-item>
                 <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 15, offset: 1}" label="套餐选择">
                     <a-checkbox-group :defaultValue="chosePages" @change="chosePagesfunction">
@@ -134,6 +152,9 @@
 </template>
 
 <script>
+    import Vue from 'vue'
+    import { ACCESS_TOKEN } from "@/store/mutation-types"
+
     import STable from '@/components/table';
     import {findByList,choosepages,modify,insert,hidestatus} from "@/api/school-center/schoolManagermentAPI"
     import {cloneObject} from '@/utils/util';
@@ -144,6 +165,15 @@
         },
         data: function () {
             return {
+                previewVisible: false,
+                previewImage: '',
+                fileList: [
+                ],
+                header:{
+                    "Authorization":Vue.ls.get(ACCESS_TOKEN)
+                },
+                fileid:{},
+                brackgroundurl:"manager/ciop/school/schoolManagement/qrcodeUpload",
                 // form
                 Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                 titleName:"",
@@ -245,6 +275,43 @@
             }
         },
         methods:{
+            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
+            },
+            uploadUrl(){
+                return this.baseuploadUrl() + this.brackgroundurl
+            }
+            ,
+            //背景图
+            handleCancel() {
+                this.previewVisible = false;
+            },
+            handlePreview(file) {
+                this.previewImage = file.url || file.thumbUrl;
+                this.previewVisible = true;
+            },
+            handleChange(obj) {
+                if (this.fileList.length==2){
+                    this.fileList.splice(0,1)
+                }else{
+                    this.fileList = obj.fileList;
+                }
+
+            },
+
+
             delet(deletdata){
                 let status=0;
                 if(deletdata.status==0){
@@ -287,6 +354,19 @@
                 let choosepagespare={
                     id:data.id
                 }
+                this.fileid={
+                    id:data.id
+                }
+                let url=this.baseuploadUrl()+"manager/ciop"+data.serviceQrcode
+                if (!(data.serviceQrcode == null || data.serviceQrcode=="")) {
+                    //下载图片浏览
+                    this.fileList.push({
+                        uid: this.getuuid(),
+                        name: '找不到图片',
+                        status: 'done',
+                        url: url,
+                    })
+                }
                 this.modifyForm.id=data.id
                 //查询中间表
                 choosepages(choosepagespare).then(res=>{
@@ -384,6 +464,7 @@
                     isShowrh:"",
                     isRecv:"",
                 })
+                this.fileList=[]
                 this.modifyForm.id=""
                 this.modifyForm.chosePages=""
                 this.chosePages.splice(0,this.chosePages.length)
@@ -397,4 +478,4 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>

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

@@ -303,7 +303,7 @@
                 this.fileid={
                     id:data.id
                 }
-                let url=this.baseuploadUrl()+"manager/ciop/packageManagement/package/getbackground/"+data.id
+                let url=this.baseuploadUrl()+"manager/ciop"+data.advImg
                 if (!(data.logo == null || data.logo=="")) {
                     //下载图片浏览
                     this.fileList.push({
@@ -316,7 +316,7 @@
 
                 //下载图片浏览
                 if (!(data.logo == null || data.logo == "")) {
-                    let xiaotuurl = this.baseuploadUrl() + "manager/ciop/packageManagement/package/getxiaotu/" + data.id
+                    let xiaotuurl = this.baseuploadUrl() +"manager/ciop/"+ data.logo
                     this.fileListxiaotu.push({
                         uid: this.getuuid(),
                         name: '找不到图片',