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的圖片預覽方法