el-upload를 사용하여 vue3에서 파일을 업로드하는 방법

el-upload 파일 업로드

프로젝트 개발 중에 파일을 업로드해야 하는 경우가 자주 발생합니다. 이 글에서는 파일 업로드를 위해 elementplus에서 el-upload를 사용하는 방법을 자세히 소개하겠습니다.

먼저 엘업로드에서 어떤 속성과 이벤트를 구성할 수 있는지 살펴보겠습니다. T 속성

ACTION: 요청 URL
Headers: 업로드된 요청 헤드 설정
Method: 업로드 요청 방법 설정
multiple: 여러 파일 지원 여부
Data: 추가 매개변수 Uploading 시 포함
name: 업로드된 파일 필드 이름
with-credentials: 쿠키 자격 증명 정보 전송 지원
위 매개변수는 기본 작업 방식으로 요청할 때 사용됩니다. 메소드이며 이러한 속성은 기본적으로 사용되지 않습니다.

show-file-list: 업로드된 파일 목록 표시 여부
drag: 드래그 앤 드롭 업로드 활성화 여부
accept: 업로드된 파일 형식 허용
on-preview: 클릭 파일 목록에서 파일 업로드 시 후크
on-remove: 파일 목록에서 파일이 제거될 때 후크
on-success: 파일 업로드 성공 시 후크
on-error: 파일 업로드 실패 시 후크
on-progress: 파일 업로드 시 후크
on-change: 파일 상태가 변경될 때 후크, 추가됨, 업로드 성공 및 실패 시 호출됨
on-exceed: 제한을 초과했을 때 실행됩니다. 후크
before-upload: 파일 업로드 전 후크입니다. 매개변수는 업로드된 파일이 false이거나 입니다. > 약속을 거부하고 업로드가 중단됩니다.

• false或者返回 Promise 且被 reject，则停止上传。

• before-remove: 删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。

• file-list/v-model:file-list: 默认上传文件

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

• auto-upload: 是否自动上传文件

• http-request: 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求

• disabled: 是否禁用上传

• limit: 允许上传文件的最大数量

方法

• abort: 取消上传请求

• submit: 手动上传文件列表

• clearFiles: 清空已上传的文件列表（该方法不支持在 before-upload 中调用）

• handleStart: 手动选择文件

• handleRemove: 手动移除文件。 file 和rawFile

  before-remove: 파일 삭제 전 후크입니다. 매개변수는 업로드된 파일과 파일 목록입니다. false 가 반환되거나 Promise 가 반환되어 거부되면 삭제됩니다. 멈출 것이다. .

file-list/v-model:file-list: 기본 파일 업로드

list-type: 파일 목록 유형, '텍스트' | '그림 카드'.

auto-upload: 파일 자동 업로드 여부

http-request: 기본값 재정의 최대 파일 수

Method

abort: 업로드 요청 취소

submit: 수동 upload file list

clearFiles: 업로드된 파일 목록 지우기(이 방법은 before -upload에서는 지원되지 않음) 🎜🎜🎜🎜handleStart: 수동으로 파일 선택 🎜🎜🎜🎜handleRemove: 수동으로 파일 제거 . file 및 rawFile이 병합되었습니다. 🎜🎜🎜🎜이미지 업로드 구현🎜🎜이미지를 업로드할 때 일반적으로 http 요청을 다시 작성하고 요청에 대한 기본 동작을 사용하지 않으므로 해당 동작은 일반적으로 ‘#’로 설정됩니다. 🎜

<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=&#39;limit&#39;
      :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: &#39;uploadImg&#39;
}
</script>
<script setup>
import { Delete, Plus, ZoomIn } from &#39;@element-plus/icons-vue&#39;;
import { reactive, ref, defineProps, defineEmits, computed, getCurrentInstance } from &#39;vue&#39;;
import { ElMessage } from &#39;element-plus&#39;;
const props = defineProps({
  // 允许上传文件件的最大数量
  limit:{
    type:Number
  },
  // 是否禁用上传
  disabled:{
    type:Boolean,
    default:false
  },
  // 文件列表类型
  listType:{
    type:String,
    default:&#39;picture-card&#39;
  },
  // 上传时携带的额外参数
  paramData: {
    type:String
  }
});
const emits = defineEmits([]);
const cns = getCurrentInstance();
const globObj = cns.appContext.config.globalProperties;
const previewVisible = ref(false);
const dialogImageUrl = ref(&#39;&#39;);
const fileListCopy = reactive({
  data: []
});
const onece = ref(false);
const myChangeFile = ref(&#39;&#39;);
const changeFileIndex = ref(-1);
const uploadImgArr = reactive({
  data: []
});
const headers = reactive({});
// 预览大图
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  previewVisible.value = true;
};
// 移除图片
const handleRemove = (file, fileList) => {
  console.log(&#39;handleRemove&#39;, handleRemove);
  console.log(&#39;file&#39;, file);
  console.log(&#39;fileList&#39;, fileList);
  fileListCopy.data = fileListCopy.data.filter(v => v.uid !== file.uid);
};
// 文件上传数量限制
const handleExceed = (files, fileList) => {
  if (props.limit) {
    ElMessage.error(`只能上传${props.limit}张图片`);
  }
  console.log(&#39;handleExceed&#39;, handleExceed);
  console.log(&#39;files&#39;, files);
  console.log(&#39;fileList&#39;, fileList);
};
// 上传请求
const uploadAction = (option) => {
  let formData = new FormData();
  const url = &#39;&#39;;
  globObj.$axios({
    url: url,
    method: &#39;post&#39;,
    transformRequest: [function(data, headers) {
      // 去除post请求默认的Content-Type
      delete headers[&#39;Content-Type&#39;]
      return data
    }],
    data: formData,
    timeout: 300000
  }).then(res => {
    ElMessage.success(&#39;资产添加成功&#39;);
  }).catch((err) => {
    console.log(err);
  });
}
// 格式大小的限制
const beforeUpload = (file) => {
  let isJPG = false,
  fileType = file.type.split(&#39;/&#39;)[0];
  if(file.type === "image/jpeg" || file.type === "image/png") {
    isJPG = true;
  } else {
    isJPG = false;
  }
  const isLt2M = file.size / 1024 / 1024;
  if (fileType != &#39;image&#39; || isLt2M > 2) {
    ElMessage.error("请上传2M以内的图片文件!");
    return false
  }
  return true;
};
// 文件上传成功时的钩子
const uploadSuccess = (response, file, fileList) => {
  // 上传成功之后后台返回的数据
  console.log(&#39;uploadSuccess&#39;, uploadSuccess);
};
const uploadProgress = (e, file, fileList) => {
  console.log(&#39;uploadProgress&#39;, uploadProgress)
};
const uploadError = (err, file, fileList) => {
  console.log(&#39;uploadError&#39;, uploadError);
};
</script>

🎜기존 함정🎜🎜일반적으로 파일을 업로드할 때 요청 헤더의 Content-Type: multipart/form-data 요구 사항에서는 파일의 임의 번호도 설정해야 하므로 요청 헤더가 필요합니다. 콘텐츠 유형: multipart /form-data; 경계=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜제가 겪었던 문제는 다음과 같습니다. 🎜🎜질문 1🎜🎜Content-Type: 현재 multipart/form-data가 설정되어 있으며 요청에는 임의의 숫자 경계가 없습니다=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜글로벌 콘텐츠 유형을 설정하면 업로드 인터페이스 설정 multipart/form-data가 작동하지 않는 것을 알 수 있습니다. 경계가 없기 때문에 서버 500에서는 업로드가 실패해야 합니다. 🎜🎜그런 다음 수동으로 Boundary를 추가하려고 했습니다. 이번에는 오류가 400으로 변경되었습니다. 🎜🎜질문 2🎜🎜 나중에 데이터를 쿼리한 결과 Content-Type: multipart/form-data를 설정할 필요가 없다고 했습니다. ; 매개변수가 formData 형식인 경우 브라우저는 자동으로 요청 헤더의 Content-Type을 Content-Type으로 변환합니다: multipart/form-data; 경계=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜하지만 설정하지 않으면 기본적으로 application/json이 됩니다. 🎜🎜그래서 정보를 확인한 결과 axios의 변환 요청 속성이 요청 데이터를 서버로 보내기 전에 수정할 수 있다는 것을 알았습니다. 요청이 기본 게시 요청 방법에 있을 때 Content-Type 값이 application/json이기 때문입니다. 기본값을 제거해야 하므로 브라우저가 자동으로 이를 추가합니다. 🎜

  globObj.$axios({
    url: url,
    method: 'post',
    transformRequest: [function(data, headers) {
      // 去除post请求默认的Content-Type
      delete headers['Content-Type']
      return data
    }],
    data: formData,
    timeout: 300000
  }).then(res => {
    ElMessage.success('资产添加成功');
  }).catch((err) => {
    console.log(err);
  });

🎜질문 3🎜🎜다른 매개변수를 전달하려면 다른 매개변수도 추가해야 합니다. 그렇지 않으면 매개변수 오류가 보고될 수 있습니다. 🎜아아아아

위 내용은 el-upload를 사용하여 vue3에서 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!