So verwenden Sie el-upload zum Hochladen von Dateien in vue3

el-upload lädt Dateien hoch

Die Notwendigkeit, Dateien hochzuladen, tritt häufig während der Projektentwicklung auf. In diesem Artikel stellen wir die Verwendung von el-upload in elementplus zum Hochladen von Dateien ausführlich vor.

Werfen wir zunächst einen Blick darauf, welche Eigenschaften und Ereignisse el-upload konfigurieren kann. T-Attribute

ACTION: Anforderungs-URL
Header: Legen Sie den hochgeladenen Anforderungskopf fest.
Method: Legen Sie die Upload-Anforderungsmethode fest.
multiple: Ob mehrere Dateien unterstützt werden sollen.
Data: Zusätzliche Parameter Beim Hochladen enthalten. Name: Feldname der hochgeladenen Datei Methode, und diese Attribute werden grundsätzlich nicht verwendet.
show-file-list: Ob die Liste der hochgeladenen Dateien angezeigt werden soll
drag: Ob Drag-and-Drop-Upload aktiviert werden soll
accept: Hochgeladene Dateitypen akzeptieren

on-preview: Klicken Sie auf die Dateiliste Der Hook, wenn die Datei hochgeladen wurde
on-remove: Der Hook, wenn die Datei aus der Dateiliste entfernt wurde
on-success: Der Hook, wenn der Datei-Upload erfolgreich war
on-error: Der Hook, wenn der Datei-Upload fehlschlägt
on-progress: Hook, wenn der Datei-Upload
on-change: Hook, wenn sich der Dateistatus ändert, hinzugefügt, der Upload wird erfolgreich aufgerufen und schlägt fehl
on-exceed: wird ausgeführt, wenn das Limit überschritten wird. Der Hook
before-upload: Der Hook vor dem Hochladen der Datei. Wenn er false oder Promise zurückgibt und wird abgelehnt, der Upload wird gestoppt.
before-remove: Hook vor dem Löschen von Dateien. Wenn false zurückgegeben wird oder Promise zurückgegeben und abgelehnt wird, erfolgt das Löschen wird aufhören.
file-list/v-model:file-list: Standard-Datei-Upload
list-type: Der Typ der Dateiliste, 'text' |. 'picture-card'.

• 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

  Auto-Upload: Ob Dateien automatisch hochgeladen werden sollen

http-Anfrage: Überschreiben Sie die Standardeinstellung. Die maximale Anzahl von Dateien Dateiliste hochladen

clearFiles: Liste der hochgeladenen Dateien löschen (diese Methode wird in before -upload nicht unterstützt)

handleStart: Dateien manuell auswählen

handleRemove: Dateien manuell entfernen . file und rawFile wurden zusammengeführt.

Implementierung des Hochladens von Bildern

Beim Hochladen von Bildern schreiben wir normalerweise die HTTP-Anfrage neu und verwenden nicht die Standardaktion zum Anfordern, daher ist die Aktion normalerweise auf „#’ festgelegt.

<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>

Vorhandene Fallstricke

Im Allgemeinen müssen wir beim Hochladen einer Datei den Inhaltstyp im Anforderungsheader festlegen: multipart/form-data; in unseren Anforderungen müssen wir auch die Zufallszahl der Datei festlegen, sodass der Anforderungsheader benötigt wird soll Content-Type sein: multipart /form-data; border=----WebKitFormBoundarypzSlbADtTRuFx5FC.

Das Folgende ist das Problem, auf das ich gestoßen bin.

Frage 1

Content-Type: Multipart/Form-Data ist zu diesem Zeitpunkt festgelegt, die Anfrage hat keine Zufallszahlengrenze=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜Wenn Sie den globalen Inhaltstyp festlegen, werden Sie feststellen, dass die Einstellung „Multipart/Formulardaten“ der Upload-Schnittstelle nicht funktioniert. Da es keine Grenze gibt, muss der Upload mit Server 500 fehlschlagen. 🎜🎜Dann habe ich versucht, die Grenze manuell hinzuzufügen. 🎜🎜Frage 2🎜🎜 Später, nach der Abfrage der Daten, hieß es, dass es nicht nötig sei, Content-Type: multipart/form-data festzulegen ; Solange der Parameter die Form formData hat, konvertiert der Browser automatisch den Content-Type des Anforderungsheaders in Content-Type: multipart/form-databoundary=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜Aber wenn ich es nicht einstelle, ist es standardmäßig application/json. 🎜🎜Also habe ich die Informationen überprüft und festgestellt, dass das transformRequest-Attribut von axios die Anforderungsdaten ändern kann, bevor es an den Server gesendet wird. Da der Wert von Content-Type bei der Standard-Post-Request-Methode application/json ist, haben wir Der Standardwert muss entfernt werden, damit der Browser ihn automatisch hinzufügt. 🎜

  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);
  });

🎜Frage 3🎜🎜Wenn Sie andere Parameter übergeben möchten, müssen auch die anderen Parameter angehängt werden, da sonst möglicherweise Parameterfehler gemeldet werden. 🎜

const formData = new FormData();
formData.append('file', file);
// 其他参数
formData.append('mailSys', mailSys);

Das obige ist der detaillierte Inhalt vonSo verwenden Sie el-upload zum Hochladen von Dateien in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!