vue3上传文件到服务器

第一种方式

    
        
            
                
                

                    将文件拖到此处 或 点击上传
                
                
            
            

                
                    
                        
                    
                    {{ item.attachmentName }}
                
            
        
    

// 导入服务商清单
const onChange = (file) => {
    // 附件格式
    const fileType = ["xlsx", "xls"];
    const size = 3;
    if (fileType) {
        const fileCut = file.file.name.substring(file.file.name.lastIndexOf('.') + 1)
        if (fileType.indexOf(fileCut.toLowerCase()) === -1) {
        return ElMessage.warning(`上传的附件格式只能是 ${fileType.toString()}!`);
        }
    }
    // 附件 大小
    if (size) {
        const isLt2M = file.file.size / 1024 / 1024 < size
        if (!isLt2M) {
        return ElMessage.warning(`上传的附件大小不能超过 ${size}MB!`)
        }
    }
    const data = new FormData()
    data.append('file', file.file)
    importServiceBill(
        data
    ).then(() => {
        ElMessage.success("上传成功")
        dialogFile.value = false
        getList();
    })
};

第二种方式

    
        
            
                
                

                    将文件拖到此处 或 点击上传
                
                
            
            

                
                    
                        
                    
                    {{ item.attachmentName }}
                
            
        
    

const url = ref(`https://viphct.1039sz.com/hct-scrm/omsLogisticsBillPayable/importServiceBill`) // 文件上传路径
const headers = ref({token:Cookies.get("Admin-Token")}) // 请求头

说明：第二种方式需要注意headers和action必须有。headers是请求头，是个对象，对象里面是token；url是上传文件的路径，‘hct-scrm/omsLogisticsBillPayable/importServiceBill’是接口