プロジェクト開発中にファイルのアップロードが必要になることがよくありますが、この記事では、elementplus での el-upload を使用したファイルのアップロードについて詳しく紹介します。
まず、el-upload で設定できるプロパティとイベントを見てみましょう。
#Attributes#method: アップロード リクエスト メソッドを設定します。
#show-file-list: アップロードされたファイルのリストを表示するかどうか
drag: ドラッグ アンド ドロップによるアップロードを有効にするかどうか
accept: アップロードされたファイルの種類を受け入れる
on-preview: ファイル リストでアップロードされたファイルをクリックするときのフック
on-remove: ファイルリストからファイルを削除するときのフック
on-success: ファイルのアップロードが成功したときのフック
on-error: ファイルのアップロード失敗時のフック
on-progress: ファイルのアップロード時のフック
on-change: ファイルのアップロード時のフックファイルステータスの変更、追加、アップロードの成功と失敗の両方が呼び出されます
on-exceed: 制限を超えたときにフックが実行されます
before -upload: ファイルのアップロード 前のフックの場合、パラメータはアップロードされたファイルです。
false が返されて拒否された場合、アップロードは停止します。 before-remove: ファイルを削除する前のフック。パラメータはアップロードされたファイルとファイルリストです。
拒否された場合、削除は停止します。 file-list/v-model:file-list: デフォルトのファイルアップロード
list-type: ファイルリストのタイプ、'テキスト ' | '絵' | '絵カード'。
auto-upload: ファイルを自動的にアップロードするかどうか
http-request: デフォルトの Xhr 動作をオーバーライドし、リクエストを実装できるようにします。アップロード ファイル
disabled: アップロードを無効にするかどうか
limit: アップロードできるファイルの最大数
#メソッド
submit: 手動アップロードファイルリスト
clearFiles: アップロードされたファイルのクリアされたリスト (このメソッドは、
before-uploadhandleStart: ファイルを手動で選択します
handleRemove: ファイルを手動で削除します。
file がマージされました。 写真のアップロードの実装
<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>通常、ファイルをアップロードするとき、リクエスト ヘッダーの Content-Type: multipart/form-data; 要件では、次の乱数を設定する必要もあります。これは、Content-Type: multipart/form-data;boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC です。
質問 1
Content-Type: multipart/form-data が設定されています。この時点では、リクエストには乱数境界がありません =----WebKitFormBoundarypzSlbADtTRuFx5FC。
その後、境界を手動で追加しようとしましたが、今度はエラーが 400 に変わりました。
質問 2
情報をクエリした後、境界を追加する必要はないと言われました。 set Content-Type: multipart/form-data; パラメータが formData フォーム内にある限り、ブラウザはリクエスト ヘッダーの Content-Type を Content-Type: multipart/form-data; border=-- に自動的に変換します。 --WebKitFormBoundarypzSlbADtTRuFx5FC。
そこで情報を確認したところ、axios のtransformRequest 属性により、リクエスト データをサーバーに送信する前にリクエスト データを変更できることがわかりました。リクエストはデフォルトのポスト リクエスト メソッドにあるため、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
他のパラメータを渡す場合は、他のパラメータも追加する必要があります。追加しないと、パラメータ エラーが報告される可能性があります。
rree以上がel-upload を使用して vue3 にファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
