ユーザーはフロントエンドにさまざまな数の画像をアップロードしますが、後で使用したりページをエコーしたりするために、相対/絶対パスをデータベースに保存する必要があります。
バックエンド ストレージの pic フィールドは、「,」カンマを使用して複数の画像 URL を結合するために使用される文字列です。
1.htmlコード:
<el-form ref="tableData71" :model="tableData71">
<el-form-item label="项目图片" prop="pic">
<el-upload
ref="upload"
action="#"
:http-request="uploadFileceshi"
:before-upload="beforeUploadceshi"
:auto-upload="true"
:limit="10"
:on-exceed="handleExceedceshi"
v-model="tableData71.pic">
<el-button size="small" type="primary">
新增项目数据图片
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<template slot-scope="scope">
<el-link>{
{ scope.row.pic}}</el-link>
</template>
</el-upload>
<el-button @click="handlePreviewceshi" title="预览图片">预览图片</el-button>
<el-dialog title="图片预览" :visible.sync="previewDialogVisibleceshi" width="80%">
<el-carousel type="card" :interval="5000">
<el-carousel-item v-for="(item, index) in previewImageListceshi" :key="index">
<el-image :src="item.src" style="width: 100%;height: 100%;" />
</el-carousel-item>
</el-carousel>
</el-dialog>
</el-form-item>
</el-form>アップロードされた写真を閲覧するためのフロントエンド回転ドア
フロントエンド JS メソッド、合計 4 つ、
1.アップロード前の認証方法
2.アップロード方法
3. アップロード数量制限方法
4. ブラウズ/エコー方式
1. 比較的古典的なアップロード前の検証方法
beforeUploadceshi(fileObj) {
// const isJPG = fileObj.type === 'image/jpeg' || fileObj.type === 'image/png';
// const isLt20M = fileObj.size / 1024 / 1024 < 20;
//
// if (!isJPG) {
// this.$message.error('上传附件只能是 JPG/PNG 格式!');
// return Promise.reject(false);
// }
// if (!isLt20M) {
// this.$message.error('上传附件大小不能超过 20MB!');
// return Promise.reject(false);
// }
// if (!this.attachFilesceshi) {
// this.attachFilesceshi = []; // 如果数组不存在，先创建
// }
this.attachFilesceshi.push(fileObj);
console.log(this.attachFilesceshi+" this.attachFilesceshi")
return fileObj;
},2. アップロードメソッド、最も重要なこと、パラメータと戻り値は何をしたいのかを明確にし、実際の状況に応じてロジックを修正する必要があります。メソッドが機能しない場合は、ログを追加してフロントデスクに出力してください問題を見つけるために。
//上传图片方法,需要改一下字段名字
uploadFileceshi() {
if (!this.attachFilesceshi || this.attachFilesceshi.length === 0) {
this.message.warning("请选择文件!");
return;
}
let formData = new FormData();
for (let i = 0; i < this.attachFilesceshi.length; i++) {
formData.append("file", this.attachFilesceshi[i]);
}
console.log(formData); // 调试用，确认 formData 中包含多个键值对
uploadAttachs(formData).then((res) => {
console.log(`服务端返回数据：${res}`);
let urls = res.split(","); // 将返回的字符串用逗号分隔开，得到多个 URL
const lastUrlIndex = urls.length - 1; // 记录最后一个 URL 的下标
let separator = ''; // 初始化一个分隔符
if (this.tableData71.pic) { // 判断变量中是否已经有了 URL
separator = ','; // 如果有，则将分隔符设置为逗号
}
for (let i = 0; i < urls.length; i++) {
let url = urls[i].trim(); // 去除 URL 中的空格
this.tableData71.pic += separator + url; // 使用分隔符将 URL 拼接到变量中
separator = ','; // 将分隔符设置为逗号，以便处理下一个 URL
}
console.log("this.tableData71.pic" + this.tableData71.pic);
this.$message.success("附件上传成功!");
// 清空表单数据及界面
this.attachFilesceshi = []
}).catch((error) => {
console.error(`附件上传失败：${error}`);
this.$message.error("附件上传失败!");
this.attachFilesceshi = []; // 清空数组
});
},
3. アップロード数の制限方法は比較的任意であり、自分で設定できます。
//上传图片错误方法,公用
handleExceedceshi(files, fileList) {
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，已自动过滤多余的文件。`);
},
4. ブラウズ/エコー メソッドに、不正な URL による「読み込み失敗」を防ぐためのフィルタリングを追加します。
//图片浏览方法,私用
handlePreviewceshi() {
if (this.tableData71.pic) {
let urls = this.tableData71.pic.split(",");
console.log("urls"+"分割"+urls)
if (urls.length > 0) {
// 过滤掉不合法的 URL
urls = urls.filter((url) => {
return url.trim().length > 0; // 过滤掉空白字符串或者不合法的 URL
});
// 初始化预览图片列表
this.previewImageListceshi = [];
urls.forEach((url) => {
this.previewImageListceshi.push({
src: url
});
});
// 打开图片预览弹窗
this.previewDialogVisibleceshi = true;
}
}
},data() にパラメータを設定することを忘れないでください。
data() {
return {
previewImageListceshi: [],
previewDialogVisibleceshi:false,
fileList: [],
attachFilesceshi: [],
previewImageUrlceshi: '',
tableData71 :{
pic: ''
}
}
}バックエンド コントローラー。パスを取得する方法がある場合、返されるのは絶対パスであるためです。
@PostMapping("/adds")
public String uploadFiles(HttpServletRequest request) throws Exception {
// 获取所有的上传文件
Map<String, MultipartFile> fileMap = ((MultipartHttpServletRequest) request).getFileMap();
List<MultipartFile> fileList = new ArrayList<>(fileMap.values());
if (fileList.isEmpty()) {
throw new IllegalArgumentException("上传文件不能为空！");
}
// 创建一个用于保存所有文件 URL 地址的数组
List<String> filePaths = new ArrayList<>();
// 遍历所有文件，上传并获取文件保存的路径
for (int i = 0; i < fileList.size(); i++) {
MultipartFile file = fileList.get(i);
if (file.isEmpty()) {
throw new IllegalArgumentException("上传文件不能为空！");
}
// 修改为获取对应的键名进行文件上传
String filePath = FileUploadUtils.upload(RuoYiConfig.getAttachPath(), file);
System.out.println(filePath + " 文件路径");
// 获取服务器的请求地址（修改此处）
String url = ServletUtils.getRequest().getScheme() + ":/"+"/" + ServletUtils.getRequest().getServerName() + ":" + ServletUtils.getRequest().getServerPort() + filePath;
System.out.println("第 " + i + " 个文件的 URL 是：" + url);
// 将文件的 URL 地址保存到数组中
filePaths.add(url);
}
// 直接返回包含多个 URL 的字符串
return String.join(",", filePaths);
}相対パスを取得している場合: 相対パス コントローラーを変更する必要があることに注意してください。ここでは、単一の URL のみをアップロードできるメソッドを示します。
public String uploadFile(@RequestParam("attachFile") MultipartFile file) throws IOException {
if (file.isEmpty()) {
throw new IllegalArgumentException("上传文件不能为空！");
}
// 上传文件并获取文件保存的路径
String filePath = FileUploadUtils.upload(RuoYiConfig.getAttachPath(), file);
System.out.println(filePath+"文件路径xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
// 返回上传的附件在服务器上的保存路径
// 获取服务器的请求地址
HttpServletRequest request = ServletUtils.getRequest();
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + filePath;
System.out.println("文件的 URL 是：" + url);
return filePath;
}最後に、コントローラーに相当する js API があります。
独自のリクエストパスを設定するだけです
//附件上传
export function uploadAttachs(data) {
return request({
url: 'xxxx/adds',
method: 'post',
data: data
})
}
要約: ビジネスの詳細は人それぞれ異なる可能性があり、多くの実装方法があります。Ruoyi フレームワークを使用する場合、すでに多くのメソッドがカプセル化されています。そのカプセル化されたメソッドをより頻繁に使用するのが最も便利です。
この記事ではフロントエンドとバックエンドについて説明します。ビジネスの詳細を変更するだけで済みます。画像のアップロード自体も公開機能なので、ほとんどの場合はコピーすることで直接使用できます。