JEECG 图片表单上传

394 阅读1分钟

html内

 <a-col span="12">
              <a-form-item-private
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 18 }"
                label="中标通知书"
              >
                <a-upload
                  :headers="uploadHeader"
                  :action="uploadUrl"
                  :fileList="removeBidWinningNoticeList"
                  @preview="uploadPreviewFile"
                  @change="handleRemoveBidWinningNoticeListChange"
                  listType="picture"
                  :accept="fileType"
                  v-decorator="['removeBidWinningNoticeList', validatorRules.removeBidWinningNoticeList]"
                  :showUploadList='{showRemoveIcon: !disabled}'
                  :disabled="disabled"
                >
                  <a-button :disabled="disabled">
                    <a-icon type="upload" />上传
                  </a-button>
                </a-upload>
              </a-form-item-private>
            </a-col>

data内

    removeContractList: [],//上传文件列表
created() {
    this.form.resetFields()
    const token = Vue.ls.get('Access-Token')
    this.uploadHeader = { 'X-Access-Token': token }
    this.init()
  },

表单验证

 validatorRules: { removeBidWinningNoticeList: {
          rules: [
            {
              required: true,
              validator: (rule, value, callback) => this.validateFileList(rule, value, callback, '请上传中标通知书!'),
            },
          ],
        },}

method内

//预览
uploadPreviewFile(file) {
      let name = file.fileName ? file.fileName : file.response.result.key
      let type = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
      if (type === 'jpg' || type === 'png') {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      } else {
        getAction(this.onloadUrl, { fileName: name }).then((res) => {
          window.open(res.result.url, '_blank')
        })
      }
    },
 //图片上传事件
handleRemoveBidWinningNoticeListChange({ file, fileList }) {
      this.removeBidWinningNoticeList = fileList
      if (file.type === 'image/png' || file.type === 'image/jpeg') {
        file.name = ' '
      }
    },

回显

 if (res.warningVoucher) {
        let list = JSON.parse(res.warningVoucher)
        that.initImages(list, (result) => {
          that.removeBidWinningNoticeList.push(result) 
        })
      }