vue3如何使用el-upload上傳文件

這篇文章主要講解了“vue3如何使用el-upload上傳文件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue3如何使用el-upload上傳文件”吧！

el-upload上傳文件

在項目開發(fā)的過程中上傳文件的需求是經(jīng)常會遇到的，這篇文章我們就詳細介紹使用elementplus中el-upload來上傳文件了。

我們先來看一下el-upload可以配置哪些屬性和事件。

屬性

• action: 請求url

• headers: 設(shè)置上傳的請求頭部

• method: 設(shè)置上傳請求方法

• multiple: 是否支持多選文件

• data: 上傳時附帶的額外參數(shù)

• name: 上傳的文件字段名

• with-credentials: 支持發(fā)送cookie憑證信息

以上這些參數(shù)都是采用action的默認(rèn)方式請求時使用的，如果我們使用自定義的請求方法，這些屬性基本上都不會使用到。

• show-file-list: 是否顯示已上傳文件列表

• drag: 是否啟用拖拽上傳

• accept: 接受上傳的文件類型

• on-preview: 點擊文件列表中已上傳文件時的鉤子

• on-remove: 文件列表移除文件時的鉤子

• on-success: 文件上傳成功時的鉤子

• on-error: 文件上傳失敗時的鉤子

• on-progress: 文件上傳時的鉤子

• on-change: 文件狀態(tài)改變時的鉤子，添加，上傳成功和失敗都會被調(diào)用

• on-exceed: 當(dāng)超出限制時執(zhí)行的鉤子

• before-upload: 文件上傳之前的鉤子，參數(shù)為上傳的文件， 若返回false或者返回 Promise 且被 reject，則停止上傳。

• before-remove: 刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，則停止刪除。

• file-list/v-model:file-list: 默認(rèn)上傳文件

• list-type: 文件列表的類型，'text' | 'picture' | 'picture-card'。

• auto-upload: 是否自動上傳文件

• http-request: 覆蓋默認(rèn)的 Xhr 行為，允許自行實現(xiàn)上傳文件的請求

• disabled: 是否禁用上傳

• limit: 允許上傳文件的最大數(shù)量

方法

• abort: 取消上傳請求

• submit: 手動上傳文件列表

• clearFiles: 清空已上傳的文件列表（該方法不支持在 before-upload 中調(diào)用）

• handleStart: 手動選擇文件

• handleRemove: 手動移除文件。 file 和rawFile 已被合并。

上傳圖片的實現(xiàn)

上傳圖片的時候我們一般都會重寫http請求，不使用默認(rèn)的action去請求，因此action我們一般都會設(shè)置成‘#’。

<template>
  <div>
    <el-upload
      action="#"
      :headers="headers"
      :list-type="listType"
      :http-request="uploadAction"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-progress="uploadProgress"
      :file-list="fileListCopy.data"
      ref="upload"
      :multiple="true"
      :limit='limit'
      :disabled="disabled"
      :data="paramData"
    >
    <el-icon><Plus /></el-icon>
    <template #file="{ file }">
      <div>
        <img :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
    </el-upload>
    <el-dialog v-model="previewVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'uploadImg'
}
</script>
<script setup>
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import { reactive, ref, defineProps, defineEmits, computed, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
  // 允許上傳文件件的最大數(shù)量
  limit:{
    type:Number
  },
  // 是否禁用上傳
  disabled:{
    type:Boolean,
    default:false
  },
  // 文件列表類型
  listType:{
    type:String,
    default:'picture-card'
  },
  // 上傳時攜帶的額外參數(shù)
  paramData: {
    type:String
  }
});
const emits = defineEmits([]);
const cns = getCurrentInstance();
const globObj = cns.appContext.config.globalProperties;
const previewVisible = ref(false);
const dialogImageUrl = ref('');
const fileListCopy = reactive({
  data: []
});
const onece = ref(false);
const myChangeFile = ref('');
const changeFileIndex = ref(-1);
const uploadImgArr = reactive({
  data: []
});
const headers = reactive({});
// 預(yù)覽大圖
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  previewVisible.value = true;
};
// 移除圖片
const handleRemove = (file, fileList) => {
  console.log('handleRemove', handleRemove);
  console.log('file', file);
  console.log('fileList', fileList);
  fileListCopy.data = fileListCopy.data.filter(v => v.uid !== file.uid);
};
// 文件上傳數(shù)量限制
const handleExceed = (files, fileList) => {
  if (props.limit) {
    ElMessage.error(`只能上傳${props.limit}張圖片`);
  }
  console.log('handleExceed', handleExceed);
  console.log('files', files);
  console.log('fileList', fileList);
};
// 上傳請求
const uploadAction = (option) => {
  let formData = new FormData();
  const url = '';
  globObj.$axios({
    url: url,
    method: 'post',
    transformRequest: [function(data, headers) {
      // 去除post請求默認(rèn)的Content-Type
      delete headers['Content-Type']
      return data
    }],
    data: formData,
    timeout: 300000
  }).then(res => {
    ElMessage.success('資產(chǎn)添加成功');
  }).catch((err) => {
    console.log(err);
  });
}
// 格式大小的限制
const beforeUpload = (file) => {
  let isJPG = false,
  fileType = file.type.split('/')[0];
  if(file.type === "image/jpeg" || file.type === "image/png") {
    isJPG = true;
  } else {
    isJPG = false;
  }
  const isLt2M = file.size / 1024 / 1024;
  if (fileType != 'image' || isLt2M > 2) {
    ElMessage.error("請上傳2M以內(nèi)的圖片文件!");
    return false
  }
  return true;
};
// 文件上傳成功時的鉤子
const uploadSuccess = (response, file, fileList) => {
  // 上傳成功之后后臺返回的數(shù)據(jù)
  console.log('uploadSuccess', uploadSuccess);
};
const uploadProgress = (e, file, fileList) => {
  console.log('uploadProgress', uploadProgress)
};
const uploadError = (err, file, fileList) => {
  console.log('uploadError', uploadError);
};
</script>

存在的坑

一般上傳文件的話請求頭中的Content-Type: multipart/form-data;我們的需求中還需要設(shè)置文件的隨機數(shù)，因此請求頭需要是這樣的Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。

下面是我遇到的問題。

問題1

設(shè)置了Content-Type: multipart/form-data;此時請求一直沒有隨機數(shù)boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。

如果設(shè)置了全局的content-type,會發(fā)現(xiàn)上傳接口設(shè)置multipart/form-data是不起作用的，因為沒有Boundary，所以上傳必定失敗，服務(wù)器500。

然后嘗試手動添加Boundary，這次錯誤變400了

問題2

后來通過查詢資料，說不用設(shè)置Content-Type: multipart/form-data;只要參數(shù)是formData形式，瀏覽器就會自動將請求頭的Content-Type轉(zhuǎn)成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。

但是我不設(shè)置的話就是默認(rèn)的application/json。

于是查閱資料發(fā)現(xiàn)axios的transformRequest屬性可以在向服務(wù)器發(fā)送請求數(shù)據(jù)之前修改請求數(shù)據(jù)，因為我們的請求在默認(rèn)的post請求方式時Content-Type的值是application/json，需要去掉默認(rèn)的值，這樣瀏覽器就可以自動添加了。

  globObj.$axios({
    url: url,
    method: 'post',
    transformRequest: [function(data, headers) {
      // 去除post請求默認(rèn)的Content-Type
      delete headers['Content-Type']
      return data
    }],
    data: formData,
    timeout: 300000
  }).then(res => {
    ElMessage.success('資產(chǎn)添加成功');
  }).catch((err) => {
    console.log(err);
  });

問題3

如果還要傳其他的參數(shù)，其他的參數(shù)必須也要append進去，否則可能會報參數(shù)錯誤。

const formData = new FormData();
formData.append('file', file);
// 其他參數(shù)
formData.append('mailSys', mailSys);

感謝各位的閱讀，以上就是“vue3如何使用el-upload上傳文件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue3如何使用el-upload上傳文件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！