フォーム データとファイルのアップロードには 4 つのアイデアがあります。
1. ファイルとフォーム データが一緒にバックエンドにアップロードされます。つまり、バックエンドのインターフェイスがファイルとフォーム データを受け取ります (これは比較的古い方法であり、バックエンド インターフェイスも複雑であり、機能を実装するのは簡単ではありません)プログレスバーのアップロードなど。推奨)
2. 最初にファイルをアップロードし、次にバックエンドにファイルを保存し (最初にデータベースに書き込まないでください)、ファイルの URL をフロントエンドに返します。URL を受信したフロントエンドは、URL を他の URL とともにバックエンドに送信します。フォーム データを作成し、バックエンドはそれを一緒にデータベースに書き込みます (バックエンドはファイルをアップロードするためのインターフェイスを分離する必要があり、推奨されます)
3. 最初にファイルをアップロードし、次にバックエンドでファイルを保存し、それをデータベースに書き込み、データベース ID を取得し、データベース ID をフロントエンドに返します。フロントエンドはフォーム データとデータベース ID をバックエンドに送信します。終了すると、フォームデータをレコードに更新するときに、バックエンドがデータベース ID に従ってレコードを検索します。
4. 最初にフォーム データをアップロードし、次にバックエンドでフォーム データを保存し、データベースに書き込みます。次に、フロント エンドでアップロード ファイルをクリックし (以前にアップロードしたフォーム データのデータベース ID を渡します)、バックエンドでend はファイルを受信して保存し、URL をフォーム データに更新します (このメソッドは実装が最も簡単ですが、2 番目と 3 番目のメソッドとは異なり、ユーザーはフォーム データとファイルを更新するために 2 つの操作が必要です。これらのメソッドは更新のみ可能です)クリックしてフォームを送信した後)
el-upload を使用してファイルをアップロードする
el-upload を使用する場合は、次の点にも注意してください。
action 属性によって送信されるリクエストは内部でカプセル化された ajax リクエストであるため、独自のカプセル化された axios を通過しないため、プロキシとして設定する場合は、リクエストにプロキシ プレフィックスを自分で追加する必要があります。トークン ID 検証を行うには、このリクエストにリクエスト ヘッダーを追加する必要もあります
el-uploadのname属性は今回送信するリクエストファイルのパラメータ名となっており、バックエンドが必要とするパラメータ名に変更する必要があります
次のステップは、上記の 2 番目の方法を使用して、フォーム データとファイルを一緒にアップロードすることです。
html部分
<el-form :rules="categoryRules" ref="categoryRuleForm" :model="categoryForm">
<el-form-item label="分类名称" label-width="120px" prop="category_name">
<el-input v-model="categoryForm.category_name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分类图片" label-width="120px" prop="category_pic">
<el-upload
list-type="picture-card"
:limit="1"
:on-exceed="handleExceed"
name="category_pic"
action="/api/category/uploadPic"
:headers="headerObj"
:on-remove="handleRemove"
:on-success="handleCategoryPicSuccess"
:file-list="fileList"
:before-upload="beforeCategoryPicUpload"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<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)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-form>
js部分
<script>
import {
getToken} from '@/utils/auth'
import {
getCategoryList, addCategory, updateCategory, deleteCategory, deleteCategoryPic } from '../../api/category'
export default {
name: '',
data () {
return {
categoryForm: {
category_name: '', // 分类名称
category_pic: '', // 分类图片
},
// el-upload的请求头
headerObj: {
Authorization: `Bearer ${
getToken()}`,
},
fileList: [], // 上传时的图片列表(这里的图片将会显示出缩略图)
// 大图预览相关
dialogImageUrl: '',
dialogVisible: false,
disabled: false
}
},
mounted () {
},
methods: {
// 添加分类
addCategory() {
this.addDialogFormVisible = false
let result = await addCategory({
category_name: this.categoryForm.category_name,
category_pic: this.categoryForm.category_pic,
})
if(result.code === 200){
this.$message.success(result.message)
this.getCategoryList()
}else{
this.$message.error(result.message)
}
},
// 上传图片成功
handleCategoryPicSuccess(res, file) {
// 将服务器返回的文件url地址赋值给表单的category_pic，这样就可以在表单提交时将图片地址提交到服务器
this.categoryForm.category_pic = res.data.category_pic
this.getCategoryList()
// 提示信息
this.$message({
message: '图片上传成功',
type: 'success'
});
},
// 上传图片前
beforeCategoryPicUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG / PNG 格式!');
}
if (!isLt1M) {
this.$message.error('上传头像图片大小不能超过 1MB!');
}
return isJPG && isLt1M;
},
// 图片超出限制
handleExceed(files, fileList) {
this.$message.error('当前限制选择 1 张图片!');
},
// 点击删除按钮
async handleRemove(file) {
// 删除图片
// 删除缩略图图片
this.fileList.splice(this.fileList.indexOf(file), 1);
// 发送请求删除服务器图片
let result = await deleteCategoryPic({
category_pic: this.categoryForm.category_pic,
})
if(result.code === 200){
this.$message.success(result.message)
}else{
this.$message.error(result.message)
}
},
// 点击大图预览按钮
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 点击下载按钮
handleDownload(file) {
// 提示
this.$message({
message: '暂未开发',
type: 'danger'
});
}
}
}
</script>