はじめに: 最近 Vue プロジェクトに触れるようになり、Element Plus を使用していますが、言葉で説明するのは難しく、このコンポーネント ライブラリは自分には合わないと感じています。この章では、要素内のアップロード ファイル コンポーネントの使用方法について簡単に説明します。
1. 完全なコード。コードには多くのコメントがあります。
導入例:
導入後の完全なコード:
<!--html 代码-->
<el-upload
ref="upload"
<!-- 必填 注释需要删除-->
action="#"
list-type="picture-card"
<!--文件个数限制 注释需要删除-->
:limit="1"
<!--自定义上传方法 注释需要删除-->
:http-request="httpRequest"
<!--超出上传个数之后的方法 注释需要删除-->
:on-exceed="handleExceed" >
<el-icon>
<Plus />
</el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :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="handleDownload(file)">
<el-icon>
<Download />
</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="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
// js 代码 这里的引入可能不全,大家用的时候自己再引入就是
import { genFileId, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
let imageUrl:any=''
//自定义上传
function httpRequest(file:any) {
// 创建 FormData 对象
const formData :any= new FormData();
// 将文件添加到 FormData 中
formData.append('file', file?.file);
//接口方法,请替换成实际的方法和返回的值
uploadPicture(formData).then((res)=>{
imageUrl=res?.p2pdata
console.log('uploadPicture1',res?.p2pdata)
})
// 返回的文件也可以加在请求方法之后
return file
};
//删除已上传的文件,内容自填
const handleRemove = (file:any) => {
console.log(file)
}
//预览放大 可以不动
const handlePictureCardPreview = (file:any) => {
dialogImageUrl.value = file.url!
dialogVisible.value = true
}
//下载 内容自填
const handleDownload = (file:any) => {
console.log(file)
}
const upload = ref<UploadInstance>()
//超出限制长度时触发替换方法 可不动
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}
効果を達成する
2. 異常事態の記録。
① 自動アップロードによりカスタム アップロードが無効になり、インターフェイスがまったくトリガーされなくなります。
ファイルを自動的にアップロードするには、auto-upload の値を true に設定してください。そうしないと、インターフェイス リクエストはトリガーされません。
②インターフェースリクエストエラー 現在のリクエストはマルチパートリクエストではありません。またはその他のリクエストエラー。
主にインターフェイスのリクエスト ヘッダーが設定されていないため、リクエスト ヘッダーを追加してください。
コンテンツ タイプ: multipart/form-data;
③アップロードされた2番目のファイルは最初のファイルを上書きしません
コンポーネントをインポートするときに、コンポーネント タグでコンポーネントがマークされているかどうかを確認してください。
ref="upload"