Ant Design Vue 上传文件

Ant Design Vue 上传文件

本地调试接口 直接在action中绑定接口 上传会出现跨域的问题；此时可使用 customRequest 覆盖默认的上传行为，自定义自己的上传行为，此时要注意配置header的content-type 否则后端获取不到file对象。

• 效果图

  

  

• 代码

  <a-upload
      :customRequest="customRequest"
      :headers="headers"
      :supportServerRender="true"
      :multiple="true"
      :file-list="fileList"
      @change="handleChange"
  >
      <div class="inner">
          <FolderOutlined
              :style="{
                  'font-size': '28px',
                  'color': '#333'
              }"
          />
          <span class="txt">点击或将文件拖拽到这里上传</span>
          <span class="tip">支持xls,xlsx,pdf,docx,doc文件且小于10M</span>
      </div>
  </a-upload>
  

  .inner {
      cursor: pointer;
      width: 260px;
      height: 101px;
      line-height: 20px;
      border-radius: 4px 4px 4px 4px;
      background-color: rgba(250, 250, 250, 100);
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      justify-content: center;
      .txt {
          font-size: 13px;
          font-weight: bold;
          margin-bottom: 3px;
          color: #666;
      }
      .tip {
          font-size: 12px;
          color: #999;
          cursor: pointer;
      }
  }
  

  import { UploadOutlined, FolderOutlined } from '@ant-design/icons-vue';
  import { uploadFile } from '../../assets/js/api'
  export default {
      components: {
          UploadOutlined,
          FolderOutlined
      },
      computed: {
          timestamp: function () {
              return '2022年01月13日 13:02:56'
          },
      },
      data() {
          return {
              headers: {
                  'Content-Type': 'multipart/form-data',
              },
              fileList: [],
          }
      },
      methods: {
          // 自定义上传，不用通过action属性
          customRequest(file) {
              // file 是上传的文件 其内容会在放在下面截图中
              // 后端需要接受的参数是 formData数据，
              console.log(file)
              const form = new FormData()
              form.append('file', file.file)
              form.append('contractName', file.file.name)
              form.append('description', file.file.name)
              //自定义上传接口
              uploadFile(form).then(res => {
                  console.log(res)
              }).catch(err => {
                  console.log(err)
              })
          },
      }
  }