小白写法嘿嘿
开发工具和关键词
开发工具： vscode
关键词：vue3、element-plus、axios
后端
后端业务逻辑处理使用的是unicloud的云函数，大家可以看我上一篇文章。
思路
1、禁止element-plus的el-upload组件自动上传，变成手动上传，提交表单时候统一处理上传文件
2、此时el-upload组件中的file文件保存到了v-model:file-list="fileList"的fileList的变量中，数据类型类型是file对象的数组
3、提交表单，循环fileList数组，将file数据类型的文件转化成base64编码
4、将子元素为base64编码数据的图片数组依次上传到服务器，并依次获取一个真实的服务器图片地址，并将这些真实地址保存到pictureslist数组
4、后面可以根据自己的代码逻辑处理真实地址的图片数组pictureslist，如：商品多张图片可以将数组转为json格式，保存到数据表中的某一个pictures字段中，后续展示商品直接读取即可
注意：这里不考虑文件上传中断和大文件的情况。
完整代码
addproduct.vue
<template> <div style="width: 80%;"> <el-form :model="form" label-width="auto" style="max-width: 600px"> <el-form-item label="标题"> <el-input v-model="form.bt" /> </el-form-item> <el-upload v-model:file-list="fileList" action="ok" :auto-upload="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" multiple> <el-icon> 添加 <Plus /> </el-icon> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> <el-form-item> <el-button type="primary" @click="onSubmit">新增</el-button> </el-form-item> </el-form> </div></template><script>import { ref, reactive } from 'vue'import axios from 'axios'const dialogImageUrl = ref('')const dialogVisible = ref(false)//这里用了响应式数据var form = reactive({ bt: '',//tp是保存了真实图片地址后的json数组 tp: '',})export default { name: 'HomeView', data() { return { form, dialogImageUrl, dialogVisible, fileList: [], zh: sessionStorage.getItem('zh') } }, methods: { async onSubmit() { var that = this console.log('submit!') console.log(this.form); if (this.fileList.length == 0) { return ElMessage({ message: '请先上传图片！', grouping: true, type: 'warning', }); } await this.upaction(); // 等待上传图片完成 console.log("我的上传图片的真实路径", this.fileList); var pictureslist = [] for (let i = 0; i < this.fileList.length; i++) { pictureslist.push(this.fileList[i].url) } // 将合并后的数组转换为 JSON 字符串 var jsonString = JSON.stringify(pictureslist); console.log("转换后的 JSON 字符串", jsonString); // 将转换后的 JSON 字符串赋值给 this.form.tp this.form.tp = jsonString; console.log("待上传表单数据", form); this.form.zh = this.zh // 将表单数据上传服务器 const res = await axios.post( "/api/addproduct", // 请求后端的 URL that.form, { headers: { "Content-Type": "application/json;charset=utf-8", "Access-Control-Allow-Origin": "*", // 允许所有域名访问，或者设置为特定的域名 "Access-Control-Allow-Methods": "GET, POST, OPTIONS", // 允许的请求方法 "Access-Control-Allow-Headers": "Content-Type", // 允许的请求头 }, } ); console.log("请求后", res); loadingInstance.close() ElMessage({ message: '上传成功！', grouping: true, type: 'success', }) }, handlePictureCardPreview(uploadFile) { console.log(uploadFile); this.dialogImageUrl = uploadFile.url this.dialogVisible = true }, handleRemove(file, fileList) { console.log(file) console.log(fileList) }, // 依次上传图片 async upaction() { var that = this for (let i = 0; i < this.fileList.length; i++) { var src = await this.uploadFile(this.fileList[i]); this.fileList[i].url = src } },//保存至服务器后返回真实图片路径地址 async uploadFile(file) { console.log("uploadFile中，未编码url为", file.url); const newbasesrc = await this.getdata(file); console.log("编码url后", newbasesrc); const res = await axios.post( "/api/upload", // 请求后端的 URL { file: newbasesrc }, { headers: { "Content-Type": "multipart/form-data;charset=utf-8", "Access-Control-Allow-Origin": "*", // 允许所有域名访问，或者设置为特定的域名 "Access-Control-Allow-Methods": "GET, POST, OPTIONS", // 允许的请求方法 "Access-Control-Allow-Headers": "Content-Type", // 允许的请求头 }, } ); console.log(res); return res.data.fileUrl; },//以下两个自定义函数是为了将input直接获取的file对象转成base64编码格式 async getdata(file) { // 使用 FileReader 将文件转换为 base64 编码字符串 console.log("getdata函数中，准备转化", file); const base64String = await this.readFileAsBase64(file); console.log("获得编码", base64String); return base64String; }, readFileAsBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { // 将文件转换为 base64 编码 const base64String = event.target.result; resolve(base64String); }; reader.onerror = reject; // 读取文件内容并转换为 base64 编码字符串 reader.readAsDataURL(file.raw); }); }, }}</script>如果对您有所帮助，给个小赞赞吧！?