vue-antd的单文件上传

项目需求要求单文件上传

整!

              <div style="text-align: center; width: 50%; margin: 50px auto 0">
                <a-upload
                  name="file"
                  :action="uploadUrl"
                  :headers="headers"
                  accept=".xlsx, .xls, .pdf, .doc, .docx"
                  :multiple="true"
                  :remove="handleRemove"
                  @preview="handlePreview1"
                  @change="handleChangeDoc1"
                  :file-list="fileListDoc1"
                >
                  <a-button type="primary"><a-icon type="plus" />选择文件</a-button>
                </a-upload>
              </div>
              <div style="color: red; line-height: 28px; width: 90%; margin: 50px auto 0">
                <a-icon type="link" />
                上传说明:<br />
                1.附件上传小于300MB!<br />
                2.仅允许导入“.xlsx, .xls, .pdf, .doc, .docx”格式文件！<br />
              </div>
            </div>

      
//定义下变量
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload',
      headers: {
        Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN),
      },
      fileListDoc1: [],

然后就对应的一下事件了

//移除文件    
handleRemove(file) {
      this.fileList.forEach((element, index) => {
        if (file == element) {
          this.fileList.splice(index, 1)
        }
      })
    },

    //上传文件
    handleChangeDoc1(info) {
      this.fileListDoc1 = []
      var fileList = [...info.fileList]
      fileList = fileList.map((file) => {
        if (file.response && file.response.code == 200) {
          file.url = file.response.url
          file.fileName = file.response.fileName
        }
        return file
      })
      this.fileListDoc1 = fileList
    },
//预览功能
    async handlePreview1(file) {
      // console.log(file)
      let path = file.url
      window.open(path)
    },