博客

jeecg-boot默认的jupload组件封装的并不完善，本身antd的upload组件已经做得很好，用原生的上传头像，开始

接下来以品牌维护为例，展示a-upload组件的使用

1. 编写表单代码

<a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="品牌LOGO">
          
          <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="品牌LOGO" 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>

2：编写beforeUpload，handleChange,getAvatarView方法

  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.brandLogo= response.message;
            this.picUrl = "Has no pic url yet";
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      getAvatarView(){
        return this.url.imgerver +"/"+ this.model.brandLogo;
      },

3：增加引入：

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

4：获取tocken

 created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },

5:增加数据属性

 //上传图片使用
        headers:{},
        picUrl: "",
        uploadLoading:false,

6：增加上传路径

url: {
          add: "/brand/brand/add",
          edit: "/brand/brand/edit",
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
        },

7：上传路径初始化：

 computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },

8:编辑的时候能够显示出来

edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'brandName','brandLogo','brandDesc','siteUrl','enabled','sortOrder','remark'))
		  //时间格式化
        });
        this.picUrl = this.model.brandLogo;
      },