Comment utiliser el-upload pour télécharger des fichiers dans vue3

el-upload télécharge des fichiers

Le besoin de télécharger des fichiers est souvent rencontré lors du développement de projets. Dans cet article, nous présenterons en détail l'utilisation d'el-upload dans elementplus pour télécharger des fichiers.

Voyons d'abord quelles propriétés et événements el-upload peut configurer. Propriétés T

ACTION : URL de la demande
En-têtes : définir l'en-tête de la demande téléchargée
Méthode : définir la méthode de demande de téléchargement
multiple : s'il faut prendre en charge plusieurs fichiers
Données : paramètres supplémentaires joint lors du téléchargement
name : nom du champ du fichier téléchargé
with-credentials : prend en charge l'envoi des informations d'identification du cookie
Les paramètres ci-dessus sont utilisés lors de la demande selon la méthode d'action par défaut si nous utilisons une demande personnalisée. méthode, et ces attributs ne sont fondamentalement pas utilisés.

show-file-list : s'il faut afficher la liste des fichiers téléchargés
drag : s'il faut activer le téléchargement par glisser-déposer
accepter : accepter les types de fichiers téléchargés
en aperçu : cliquer sur la liste des fichiers Le hook lorsque le fichier a été téléchargé
on-remove : Le hook lorsque le fichier est supprimé de la liste des fichiers
on-success : Le hook lorsque le téléchargement du fichier est réussi
on-error : le hook lorsque le téléchargement du fichier échoue
on-progress : le hook lorsque le téléchargement du fichier
on-change : le hook lorsque l'état du fichier change, ajouté, sera appelé en cas de succès et d'échec du téléchargement
on-exceed : exécuté lorsque la limite est dépassée Le hook
before-upload : Le hook avant le téléchargement du fichier Le paramètre est le fichier téléchargé S'il renvoie false ou renvoie . Promesse et est rejetée, le téléchargement s'arrêtera.

• 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 : hook avant de supprimer des fichiers. Les paramètres sont les fichiers téléchargés et la liste des fichiers. Si false est renvoyé ou si Promise est renvoyé et est rejeté, suppression. va s'arrêter.

file-list/v-model:file-list : Téléchargement de fichier par défaut

list-type : Le type de liste de fichiers, 'text' |

téléchargement automatique : s'il faut télécharger automatiquement les fichiers

demande http : remplacer la valeur par défaut Le nombre maximum de fichiers

Méthode

abort : annuler la demande de téléchargement

soumettre : manuellement télécharger la liste des fichiers

clearFiles : effacer la liste des fichiers téléchargés (cette méthode n'est pas prise en charge dans avant -upload) 🎜🎜🎜🎜handleStart : sélectionner manuellement les fichiers 🎜🎜🎜🎜handleRemove : supprimer manuellement les fichiers . file et rawFile ont été fusionnés. 🎜🎜🎜🎜Mise en œuvre du téléchargement d'images🎜🎜Lors du téléchargement d'images, nous réécrivons généralement la requête http et n'utilisons pas l'action par défaut pour demander, l'action est donc généralement définie sur «#’. 🎜

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

🎜Pièges existants🎜🎜Généralement, lors du téléchargement d'un fichier, le Content-Type dans l'en-tête de la requête : multipart/form-data dans nos exigences, nous devons également définir le numéro aléatoire du fichier, donc l'en-tête de la requête doit être Content-Type : multipart /form-data ; border=----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜Voici le problème que j'ai rencontré. 🎜🎜Question 1🎜🎜Content-Type : multipart/form-data est défini ; à ce stade, la requête n'a pas de limite de nombres aléatoires =----WebKitFormBoundarypzSlbADtTRuFx5FC. 🎜🎜Si vous définissez le type de contenu global, vous constaterez que le paramètre d'interface de téléchargement multipart/form-data ne fonctionne pas. Parce qu'il n'y a pas de limite, le téléchargement doit échouer avec le serveur 500. 🎜🎜Ensuite, j'ai essayé d'ajouter Boundary manuellement. Cette fois, l'erreur est passée à 400. 🎜🎜Question 2🎜🎜 Plus tard, après avoir interrogé les données, il a été dit qu'il n'était pas nécessaire de définir Content-Type : multipart/form-data. ; tant que le paramètre est sous la forme formData, le navigateur convertira automatiquement le Content-Type de l'en-tête de requête en Content-Type : multipart/form-data; 🎜🎜Mais si je ne le configure pas, ce sera application/json par défaut. 🎜🎜J'ai donc vérifié les informations et découvert que l'attribut transformRequest d'axios peut modifier les données de la requête avant de les envoyer au serveur. Parce que la valeur de Content-Type lorsque notre requête est dans la méthode de requête de publication par défaut est application/json, nous. Vous devez supprimer la valeur par défaut, le navigateur l'ajoutera donc automatiquement. 🎜

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

🎜Question 3🎜🎜Si vous souhaitez transmettre d'autres paramètres, les autres paramètres doivent également être ajoutés, sinon des erreurs de paramètres peuvent être signalées. 🎜

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!