jeecg前端框架之上传图片（vue）

比眉伴天荒 2021-12-17 13:39 1317阅读 0赞

jeecg里面的vue是封装过的，语法与原生vue有很大差别，开发时遇到问题，资料也不多，比如现在要讲的图片上传问题。先给出解决方案：

1.模态框  
2.列表显示

1.先看模态框怎么展示的，照片用picture表示：

![在这里插入图片描述][20190708202753117.png]

*  控件

<a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-upload
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                :action="uploadAction"
                :data="{'isup':1}"
                :headers="headers"
                :beforeUpload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>
                <div v-else>
                  <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
            </a-form-item>

*  方法：

beforeUpload: function(file){
            var fileType = file.type;
            if(fileType.indexOf('image')<0){
              this.$message.warning('请上传图片');
              return false;
            }
            //TODO 验证文件大小
          },
          handleChange (info) {
            this.picUrl = "";
            if (info.file.status === 'uploading') {
              this.uploadLoading = true
              return
            }
            if (info.file.status === 'done') {
              var response = info.file.response;
              this.uploadLoading = false;
              console.log(response);
              if(response.success){
                this.model.picture = response.message;
                this.picUrl = "Has no pic url yet";
              }else{
                this.$message.warning(response.message);
              }
            }
          },
          getAvatarView(){
            return this.url.imgerver +"/"+ this.model.picture;
          },

*  data里面的url加，fileUpload的路径不用变，在系统配置文件里面会映射到一个本地的目录，我是在D盘的upload文件夹

uploadLoading:false,
            picUrl: "",
            url: {
              imgerver: window._CONFIG['domianURL']+"/sys/common/view",
              fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
            },

*  import

import Vue from 'vue'
     import { ACCESS_TOKEN } from "@/store/mutation-types"

*  还有额外的

created () {
          const token = Vue.ls.get(ACCESS_TOKEN);
          this.headers = {"X-Access-Token":token}
    
        },
        computed:{
          uploadAction:function () {
            return this.url.fileUpload;
          }

2.列表展示

*  控件部分，在table标签下加template :

<a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
    
            <template slot="pictureslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <a-avatar shape="square" :src="getAvatarView(record.picture)" icon="user"/>
              </div>
            </template>

*  data的columns加图片列

{
                title: '头像',
                align: "center",
                width: 120,
                dataIndex: 'picture',
                scopedSlots: {customRender: "pictureslot"}
              },

*  方法区

methods: {
          getAvatarView: function (picture) {
            return this.url.imgerver + "/" + picture;
          },
        }

*  url列表加个img路径

url: {
              imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
              list: "/park/blackList/list",
              delete: "/park/blackList/delete",
              deleteBatch: "/park/blackList/deleteBatch",
              exportXlsUrl: "park/blackList/exportXls",
              importExcelUrl: "park/blackList/importExcel",
           },

功能基本上实现了，不过jeecg是把图片缓存在本地，若要自定义，比如用fdfs/ftp缓存，要自己写控制类ComController的图片预览方法

[20190708202753117.png]: /images/20211213/2006cfeb7ae14e2baaf44ea3cfb7b95e.png