南京行业门户网站,无锡阿里巴巴做网站,做网站 (公司),团购网站建设报价小白写法嘿嘿 开发工具和关键词 开发工具#xff1a; vscode
关键词#xff1a;vue3、element-plus、axios 后端 后端业务逻辑处理使用的是unicloud的云函数#xff0c;大家可以看我上一篇文章。 思路 1、禁止element-plus的el-upload组件自动上传#xff0c;变成手动上传…小白写法嘿嘿 开发工具和关键词 开发工具 vscode
关键词vue3、element-plus、axios 后端 后端业务逻辑处理使用的是unicloud的云函数大家可以看我上一篇文章。 思路 1、禁止element-plus的el-upload组件自动上传变成手动上传提交表单时候统一处理上传文件
2、此时el-upload组件中的file文件保存到了v-model:file-listfileList的fileList的变量中数据类型类型是file对象的数组
3、提交表单循环fileList数组将file数据类型的文件转化成base64编码
4、将子元素为base64编码数据的图片数组依次上传到服务器并依次获取一个真实的服务器图片地址并将这些真实地址保存到pictureslist数组
4、后面可以根据自己的代码逻辑处理真实地址的图片数组pictureslist如商品多张图片可以将数组转为json格式保存到数据表中的某一个pictures字段中后续展示商品直接读取即可
注意这里不考虑文件上传中断和大文件的情况。 完整代码 addproduct.vue
templatediv stylewidth: 80%;el-form :modelform label-widthauto stylemax-width: 600pxel-form-item label标题el-input v-modelform.bt //el-form-itemel-upload v-model:file-listfileList actionok :auto-uploadfalse list-typepicture-card:on-previewhandlePictureCardPreview :on-removehandleRemove multipleel-icon添加Plus //el-icon/el-uploadel-dialog v-modeldialogVisibleimg w-full :srcdialogImageUrl altPreview Image //el-dialogel-form-itemel-button typeprimary clickonSubmit新增/el-button/el-form-item/el-form/div
/templatescript
import { ref, reactive } from vue
import axios from axiosconst 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 thisconsole.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.tpthis.form.tp jsonString;console.log(待上传表单数据, form);this.form.zh this.zh// 将表单数据上传服务器const res await axios.post(/api/addproduct, // 请求后端的 URLthat.form,{headers: {Content-Type: application/json;charsetutf-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.urlthis.dialogVisible true},handleRemove(file, fileList) {console.log(file)console.log(fileList)},// 依次上传图片async upaction() {var that thisfor (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;charsetutf-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 如果对您有所帮助给个小赞赞吧
