【Vue3】Ant-Design 文件上传

效果

代码

<template>
	<div class="upload-block">
      <!-- <div class="msgTitle">请上传以下格式的文档：</div>
      <div class="msgContent">.txt.</div> -->
      <div class="uploadBtn">
        <a-upload v-model:file-list="txtFile" name="txt" accept=".txt" :multiple="true"
          :before-upload="beforeUploadTxt" :headers="headers" :showUploadList="true" :withCredentials="true"
          :disabled="loading">
          <a-button v-if="txtFile.length < 1" type="primary" class="selectFileBtn" @click="handleUploadTxt">
            <upload-outlined></upload-outlined>
            txt
          </a-button>
        </a-upload>
      </div>
    </div>
</template>

<script>
  import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue'
  import { message } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import axios from '../utils/axios'

  export default defineComponent({
    name: 'Index',
    components: {
      UploadOutlined
    },
    setup() {
      const tags = reactive({
        tag: '',
        pos: ''
      });

      const txtFile = ref([]);

      const loading = ref(false);

	  // Txt上传前
	  const beforeUploadTxt = (file) => {
		  console.log('file', file);
		
		  // 获取图片地址
		  const reader = new FileReader();
		  reader.readAsDataURL(file);
		  reader.onload = e => {
		    // console.log('e.target', e.target)
		    file.path = e.target.result;
		    console.log('url', file.path)
		    txtFile.value = [file];
		  };
		  return false;
	  }
	
	  // Txt上传
	  const handleUploadTxt = () => {
	  	  console.log('txt', txtFile.value[0]);
		
	  	  if (!txtFile.value.length) {
		    message.warning('请先上传文件！');
		    console.log('Please upload first');
		    return;
		  }
		
		  // 使用formData格式传递参数
		  let params = new FormData();
		  params.append('txt', txtFile.value[0]);
		
		  loading.value = true;
		
		  try {
		    axios.post('/upload_txt', params).then((res) => {
		      message.success('请求成功！');
		      console.log(res)
		    })
		  } catch (err) {
		    console.log(err);
		  } finally {
		    loading.value = false;
		  }
	  }

	  // 上传后
	  const txtChange = info => {
        if (info.file.status !== 'uploading') {
          // txtFile = info.file;
          console.log(info.file, info.txtFile);
        }

        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件上传成功！`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败！`);
        }
      }
      
      return {
        loading,
        txtFile,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        txtChange,
        beforeUploadTxt,
        handleUploadTxt
      }
    }
  })
</script>

参考资料：vue中的文件上传和下载