Cara menggunakan el-upload untuk memuat naik fail dalam vue3

el-upload uploads files

Keperluan untuk memuat naik fail sering ditemui semasa pembangunan projek Dalam artikel ini, kami akan memperkenalkan secara terperinci penggunaan el-upload dalam elementplus untuk memuat naik fail.

Mari kita lihat dahulu sifat dan acara yang boleh dikonfigurasikan oleh el-upload.

Atribut

• tindakan: Permintaan url

• pengepala: Tetapkan pengepala permintaan muat naik

• kaedah: Tetapkan kaedah permintaan muat naik

• berbilang: Sama ada untuk menyokong berbilang pilihan fail

• data: Parameter tambahan disertakan semasa memuat naik

• nama: Nama medan fail dimuat naik

• dengan kelayakan: Menyokong penghantaran maklumat kelayakan kuki

Parameter di atas digunakan apabila meminta dalam cara tindakan lalai Jika kami menggunakan kaedah permintaan tersuai, atribut ini pada dasarnya tidak akan digunakan.

• tunjukkan senarai-fail: sama ada mahu memaparkan senarai fail yang dimuat naik

• seret: sama ada hendak mendayakan muat naik seret dan lepas

• terima: Terima jenis fail yang dimuat naik

• pada pratonton: Cangkuk apabila mengklik fail yang dimuat naik dalam senarai fail

• on-remove: cangkuk apabila fail dialih keluar daripada senarai fail

• on-success: cangkuk apabila muat naik fail berjaya

• on -ralat: Cangkuk apabila muat naik fail gagal

• sedang berjalan: Cangkuk apabila muat naik fail gagal

• semasa perubahan: Cangkuk apabila status fail berubah , Ditambah, kedua-dua kejayaan dan kegagalan muat naik akan dipanggil

• on-exceed: cangkuk dilaksanakan apabila melebihi had

• sebelum muat naik: muat naik fail Untuk cangkuk sebelumnya, parameter ialah fail yang dimuat naik Jika false dikembalikan atau Promise dikembalikan dan ditolak, muat naik akan berhenti.

• sebelum alih keluar: cangkuk sebelum memadam fail Parameter ialah fail yang dimuat naik dan senarai fail Jika false dikembalikan atau Promise dikembalikan dan ditolak, pemadaman akan berhenti.

• file-list/v-model:file-list: Fail muat naik lalai

• jenis senarai: Jenis senarai fail, ' teks ' |. 'gambar' |.

• automuat naik: Sama ada hendak memuat naik fail secara automatik

• permintaan http: Gantikan tingkah laku Xhr lalai dan membolehkan anda melaksanakan fail anda sendiri permintaan muat naik

• dilumpuhkan: Sama ada hendak melumpuhkan muat naik

• had: Bilangan maksimum fail yang dibenarkan untuk dimuat naik

Kaedah

• batalkan: Batalkan permintaan muat naik

• serahkan: Muat naik senarai fail secara manual

• clearFiles: Dikosongkan Senarai fail yang dimuat naik (kaedah ini tidak menyokong panggilan masuk before-upload)

• handleStart: Pilih fail secara manual

• handleRemove: Alih keluar dokumen secara manual. file dan rawFile telah digabungkan.

Pelaksanaan memuat naik gambar

Apabila memuat naik gambar, kami biasanya menulis semula permintaan http dan tidak menggunakan tindakan lalai untuk meminta, jadi kami biasanya menetapkan tindakan kepada &lsquo ;#’.

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

Perangkap sedia ada

Secara amnya apabila memuat naik fail, Jenis Kandungan dalam pengepala permintaan: multipart/form-data dalam keperluan kami, kami juga perlu menetapkan nombor rawak fail , jadi pengepala permintaan memerlukan This is Content-Type: multipart/form-data boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC.

Berikut ialah masalah yang saya hadapi.

Soalan 1

Tetapkan Jenis Kandungan: multipart/form-data pada masa ini, permintaan tidak mempunyai sempadan nombor rawak=----WebKitFormBoundarypzSlbADtTRuFx5FC.

Jika anda menetapkan jenis kandungan global, anda akan mendapati bahawa tetapan antara muka muat naik berbilang bahagian/data borang tidak berfungsi Kerana tiada Sempadan, muat naik mesti gagal dengan pelayan 500.

Kemudian saya cuba menambah Boundary secara manual, tetapi kali ini ralat bertukar kepada 400

Soalan 2

Selepas menanyakan data, ia mengatakan bahawa tidak perlu ditetapkan Content-Type: multipart/form-data; Selagi parameter berada dalam bentuk formData, penyemak imbas akan secara automatik menukar Content-Type pengepala permintaan ke Content-Type: multipart/form-data; WebKitFormBoundarypzSlbADtTRuFx5FC.

Tetapi jika saya tidak menetapkannya, ia akan menjadi application/json secara lalai.

Jadi saya menyemak maklumat dan mendapati bahawa atribut transformRequest axios boleh mengubah suai data permintaan sebelum menghantar data permintaan ke pelayan Kerana permintaan kami adalah dalam kaedah permintaan pos lalai, nilai Jenis Kandungan ialah aplikasi/json, dan nilai lalai perlu dialih keluar supaya penyemak imbas boleh menambahnya secara automatik.

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

Soalan 3

Jika anda ingin melepasi parameter lain, parameter lain juga mesti dilampirkan, jika tidak ralat parameter mungkin dilaporkan.

rreeee

Atas ialah kandungan terperinci Cara menggunakan el-upload untuk memuat naik fail dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!