快捷導航

go-gin-vue3-elementPlus帶參手動上傳文件的案例代碼

更新時間：2023年11月02日 11:11:26 作者：呆萌小新@淵潔

這篇文章主要介紹了go-gin-vue3-elementPlus帶參手動上傳文件的案例代碼,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一. 總體代碼流程

1.1 全局Axios部分樣例

axios前后端網(wǎng)絡(luò)交互

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 創(chuàng)建axios實例
const service = axios.create({
    // axios中請求配置有baseURL選項，表示請求URL公共部分
    baseURL: 'http://127.0.0.1:20139',
    // 超時
    timeout: 5000
})
export default service;
// 不使用service實例.重新創(chuàng)建axios封裝上傳
export function uploadFiles(url,data={}){
    return axios({
        method: "POST",
        url: 'http://127.0.0.1:20139'+url,
        transformRequest: [function(data, headers) {
            // 去除post請求默認的Content-Type
            delete headers['Content-Type']
            return data
        }],
        data: data,
    })
}

1.2 上傳業(yè)務(wù)

關(guān)鍵代碼一覽.需要留意的是,我使用手動上傳,element中before-upload,before-remove失效. 為避免更多問題使用了on-change監(jiān)聽.其中uploadFile參數(shù)是element封裝的普通對象. file對象被封裝在其中的raw屬性. 這一點要尤為注意 gin框架不同于springboot. formfile只能讀取file類型

在這里插入圖片描述

    <el-form :inline="true"
             :model="resumeForm"
             class="demo-form-inline"
             label-position="right"
             label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input v-model="resumeForm.name" placeholder="請輸入姓名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="電話">
            <el-input v-model="resumeForm.phone" placeholder="請輸入電話" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="郵箱">
            <el-input v-model="resumeForm.email" placeholder="請輸入郵箱" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="工作經(jīng)驗">
            <el-input v-model="resumeForm.experience" placeholder="請輸入工作經(jīng)驗" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="學歷">
            <el-select
                v-model="resumeForm.education"
                placeholder="請選擇學歷水平"
                clearable
            >
              <el-option label="專科" value="0"/>
              <el-option label="本科" value="1"/>
              <el-option label="研究生" value="2"/>
              <el-option label="博士" value="3"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上傳簡歷">
            <el-upload
                ref="recruitRef"
                class="upload-demo"
                drag
                action="#"
                :auto-upload="false"
                :on-change="handleChange"
                limit="1"
            >
              <el-icon class="el-icon--upload">
                <upload-filled/>
              </el-icon>
              <div class="el-upload__text">
                拖拽 或 <em>點擊上傳</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  .pdf 文件大小 ≤ 500kb
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="postResumeForm()">投遞</el-button>
      </el-form-item>
    </el-form>

const router = useRouter()
const resumeForm = reactive({
  name: '',
  phone: '',
  email: '',
  experience: '',
  education: '',
  position: router.currentRoute.value.params.position
})
const recruitRef = ref()
let formData = new FormData()
// 文件改變觸發(fā)
function handleChange(uploadFile, uploadFiles) {
	// 文件校驗
  if (!verifyBeforeUpload(uploadFile)) {
    removeFile()
    return
  }
  console.log(uploadFile)
  formData.append("file", uploadFile.raw)
}
function removeFile() {
  if (recruitRef.value) {
    formData = new FormData()
    recruitRef.value.clearFiles()
  }
}
// 提交表單
function postResumeForm() {
  ElMessageBox.confirm('確認提交?提交后僅能修改一次', '提示', {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    if (formData === null || formData === undefined) {
      ElMessage.info("必須遞交簡歷信息!")
      return
    }
    for (let key in resumeForm) {
      formData.append(key,resumeForm[key])
    }
    let res = await reqPostResumeForm(formData)
    if (res.code !== 200) {
      ElMessage.error("簡歷投遞失敗")
      return
    }
    await ElMessageBox.alert("簡歷投遞成功! 3-7個工作日內(nèi),您將收到回復", '提示', {
      confirmButtonText: "確認"
    })
    removeFile()
  }).catch((err) => {
    removeFile()
    console.log(err)
    ElMessage.info("簡歷投遞已取消!")
  })
}

文件校驗部分

// 單文件大小校驗
function verifyFileSize(file) {
    if (file) {
        let fileSize = file.size;
        let fileMaxSize = 1024 * 500;//500kb
        if (fileSize > fileMaxSize) {
            ElMessage.error("文件不能大于500kb！");
            file.value = "";
            return false;
        } else if (fileSize <= 0) {
            ElMessage.error("文件不能為0kb！");
            file.value = "";
            return false;
        }
        return true
    }
    ElMessage.error("必須傳遞文件!")
    return false;
}
// 校驗文件格式和大小
export function verifyBeforeUpload(file) {
    // 格式
    const extension = file.name.split('.').pop().toLowerCase();
    console.log(extension)
    if (!ACCEPTED_EXTENSIONS.includes(extension)) {
        ElMessage.error('僅支持 pdf 格式的文件');
        return false;
    }
    // 大小
    return verifyFileSize(file);
}

請求發(fā)送部分

export function reqPostResumeForm(formData){
    return uploadFiles(jobs.postResumeUrl,formData)
}

二. 后端部分

func PostResume(c *gin.Context) {
	file, err := c.FormFile("file")
	if err != nil {
		panic(fmt.Sprintf("file參數(shù)不能為空"))
	}
	var resume model.Resume
	err = c.ShouldBind(&resume)
	if err != nil {
		panic(fmt.Sprintf("resume獲取錯誤,原因是: %v", err))
	}
	log.Printf("%v", file)
}