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.
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
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.
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='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({
// 允许上传文件件的最大数量
limit:{
type:Number
},
// 是否禁用上传
disabled:{
type:Boolean,
default:false
},
// 文件列表类型
listType:{
type:String,
default:'picture-card'
},
// 上传时携带的额外参数
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({});
// 预览大图
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);
};
// 文件上传数量限制
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请求默认的Content-Type
delete headers['Content-Type']
return data
}],
data: formData,
timeout: 300000
}).then(res => {
ElMessage.success('资产添加成功');
}).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以内的图片文件!");
return false
}
return true;
};
// 文件上传成功时的钩子
const uploadSuccess = (response, file, fileList) => {
// 上传成功之后后台返回的数据
console.log('uploadSuccess', uploadSuccess);
};
const uploadProgress = (e, file, fileList) => {
console.log('uploadProgress', uploadProgress)
};
const uploadError = (err, file, fileList) => {
console.log('uploadError', uploadError);
};
</script>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.
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
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);
});Jika anda ingin melepasi parameter lain, parameter lain juga mesti dilampirkan, jika tidak ralat parameter mungkin dilaporkan.
rreeeeAtas 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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
