vue3+ts 实现文件上传功能

北枳~

已于 2024-08-02 11:07:28 修改

阅读量262

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-08-02 10:09:05 首次发布

本文链接：https://blog.csdn.net/m0_59006402/article/details/140865145

版权

 <el-upload
            ref="upload"
            style="width: 100%"
            v-model:file-list="fileList"
            class="m-l-10"
            action="#"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="()=>getImportExcel()"
            :before-upload="beforeUpload"
            accept=".zip,.rar,.xls,.xlsx,.doc,.docx,.pdf"
          >
            <el-button type="primary" icon="EditPen">上传</el-button>
            <span class="c-red">(仅支持.zip,.rar,.xls,.xlsx,.doc,docx,.pdf格式的文件)</span>
          </el-upload>

const fileList = ref<UploadUserFile[]>([])
const beforeUpload = (file) => {
  const allowedTypes = ['application/x-zip-compressed', 'application/x-compressed', 'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'application/pdf'];
  const isValidFileType = allowedTypes.includes(file.type);

  if (!isValidFileType) {
    // 文件类型不符合要求
    ElMessage.error('只能上传 .zip, .rar, .xls, .xlsx, .doc, .docx, .pdf 类型的文件');
    return false; // 返回 false 可以阻止文件上传
  }
  return true; // 返回 true 允许文件上传
};
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const fileUrl = files[0] as UploadRawFile
  file.value = fileUrl
  // console.log(file.value,'更换文件的')
  fileUrl.uid = genFileId()
  upload.value!.handleStart(fileUrl)
}

const getImportExcel = ()=>{
  file.value =  fileList.value[0].raw
  // console.log(file.value,'不更换文件只提交的')
}

const file = ref<any>() 这个是存放文件流的变量

这里要注意一下接口定义的方式是 formData

export const terminalRecordUpload = async (formDataParams: any) => {
  const formData = new FormData();
  for (const key in formDataParams) {
    if (Object.prototype.hasOwnProperty.call(formDataParams, key)) {
      formData.append(key, formDataParams[key]);
    }
  }

  return await request<ApiResponseData<any>>({
    method: 'post',
    url: `接口地址`,
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data', // 设置表单数据的 Content-Type
    },
  });
};