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

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

1.模态框
2.列表显示

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

• 控件

<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的图片预览方法