vue3加axios配合element-plus实现图片等文件本地上传,并获取服务器返回的真实地址数据,前端写法

小白写法嘿嘿

开发工具和关键词

开发工具: 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 = 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;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.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;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>

 如果对您有所帮助,给个小赞赞吧!🌹

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/21239.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

装修10个容易被遗忘的开关插座位置

雅静说家里开关插座哪些最容易忘记了留?      一共10个,你看看有少的吗&#xff0c;我家水电师父就没有留够      来了又重新补的很麻烦,记得收藏      1,大门口上边留一个,后期可以安装监控      特别家里有老人和小孩,以及经常来快递的      2,弱电箱留…

7. MySQL 视图、索引

文章目录 【 1. 视图 View 】1.1 视图原理1.2 创建视图 CREATE VIEW1.2.1 创建基于单表的视图1.2.2 创建基于多表的视图 1.3 查看视图1.3.1 查看视图的内容1.3.2 查看视图的详细信息 1.4 修改视图 ALTER VIEW1.4.1 修改视图内容1.4.2 修改视图名称 1.5 删除视图 DORP VIEW 【 2…

961题库 北航计算机 计算机网络 附答案 选择题形式

有题目和答案&#xff0c;没有解析&#xff0c;不懂的题问大模型即可&#xff0c;无偿分享。 第1组 习题 OSI 参考模型的第 5 层( 自下而上 ) 完成的主要功能是 A. 差错控制 B. 路由选择 C. 会话管理 D. 数据表示转换 100BaseT 快速以太网使用的导向传输介质是 A. 双绞线 B. …

Gin的快速入门和搭建

文章目录 Go的工程工程架构技术选型 Gin入门 Go的工程 基于Go生态&#xff0c;构建一个支持内容管理&#xff0c;内容加工、内容分发的内容库系统。 内容管理&#xff1a;增删改查内容加工&#xff1a;例如内容审核、推荐等内容分发&#xff1a;将内容可以推到不同的业务线 …

linux进阶的一些操作以及知识点------习题集(实践)

请创建以你姓名全拼的用户luwenhua&#xff0c;将其设置为免密登录&#xff0c;切换到luwenhua用户&#xff0c;打开终端&#xff0c;完成以下操作 &#xff08;一&#xff09;bash脚本基础练习 1&#xff09;第一题&#xff1a;请在终端里定义两个用户变量num120&#xff0c…

C# try catch异常捕获

异常捕获 执行过程&#xff1a;try中的代码没有出现异常&#xff0c;则catch里面不会自行&#xff0c;如果try中代码出现异常&#xff0c;则后面的代码都不执行&#xff0c;直接跳到catch中的代码执行。 // try catch 可以捕获多个错误&#xff0c; try...catch...catch.... …

【HarmonyOS】 多层嵌套对象通过@ObjectLink和@Observed实现渲染更新处理!

【HarmonyOS】 多层嵌套对象通过ObjectLink和Observed实现渲染更新处理&#xff01; 一、问题背景&#xff1a; 上文讲过 &#xff08;【HarmonyOS】List组件多层对象嵌套ForEach渲染更新的处理&#xff09;对多层嵌套的简单处理&#xff0c;即&#xff1a;深拷贝item数据&…

C++一个StringBad类

设计一个字符串类,下面的代码是一个不好的设计,起名StringBad。 //stringbad.h #pragma once //一个设计有问题的string类 #include <iostream> using namespace std;class StringBad { public:StringBad();//默认构造函数StringBad(const char* s);//构造函数~StringBa…

计算机毕业设计 | springboot+vue会议室管理系统(附源码)

1&#xff0c;绪论 1.1 项目背景 随着企业规模的不断扩大&#xff0c;会议室管理愈加复杂。传统的手工预约会议室的方式已经无法满足现代企业的需求&#xff0c;因此&#xff0c;开发一套会议室系统方案变得尤为重要。会议室系统可以实现会议室的在线预约、会议室资源的有效利…

每日学习一点:Chatgpt使用shell脚本

前言 本章&#xff0c;需要使用一个会写shell脚本的AI&#xff0c;比如chatgpt 4o&#xff0c;和了解shell脚本并会使用 当然这需要使用linux&#xff0c;其他系统当然也可以做到&#xff0c;就自学吧(๑•̀ㅂ•́)و✧ 使用脚本来完成&#xff0c;一些重复任务的自动化 1.了…

MyBatis二、搭建 MyBatis

MyBatis二、搭建 MyBatis 开发环境MySQL 不同版本的注意事项驱动程序&#xff08;Driver&#xff09;JDBC URL连接参数MyBatis配置文件版本兼容性常见问题与解决方案示例&#xff08;MySQL 8.x与MyBatis连接&#xff09; 创建 Maven 工程打包方式&#xff1a;Jar引入依赖创建数…

rman 备份集没有control file的恢复

rman备份文件&#xff0c;而且是备份的数据文件&#xff0c;没有控制文件没有参数文件的备份&#xff0c;所以普通的 &#xff08;1&#xff09; 先恢复控制文件restore controlfile from ‘…bak’; &#xff08;2&#xff09; 然后catalog start with ‘/data/20…

【TB作品】MSP430 G2553 单片机口袋板,电风扇模拟控制系统设计

功能 电风扇模拟控制系统设计 基本要求: 用LED/LCD 显示电风扇的工作状态 (1,2,3,4 四档风力), 显示风类:“自然风”、“常风”和“睡眠风”。 设计 “自然风”“常风”和“睡眠风” 三个风类键用于设置风类 设计一个“摇头”键用于控制电机摇头。 设计一个“定时”键&#x…

慢SQL的治理思路

慢SQL的治理思路 什么是慢SQL慢SQL产生的原因查看慢 SQL 是否开启开启慢 SQL 记录开启慢查询日志分析慢 SQL解决和优化慢SQL的方法 什么是慢SQL 慢 SQL 指的是 MySQL 中执行比较慢的 SQL&#xff0c;排查慢 SQL 最常用的方法是通过慢查询日志来查找慢 SQL。 MySQL 的慢查询日志…

使用element的过渡效果来做动效

transition来做过渡效果&#xff1a; <transition name"el-zoom-in-bottom"><div></div> </transition> name属性&#xff1a; 属性描述el-fade-in-linear淡入淡出匀速&#xff1b;el-fade-in淡入淡出快速&#xff1b;el-zoom-in-center中…

快速排序与归并排序(非递归)

目录 快速排序&#xff08;双指针法&#xff09; 原理 代码 快速排序&#xff08;非递归&#xff09; 原理 代码 归并排序 介绍 优点 缺点 图片 原理 代码 归并排序&#xff08;非递归&#xff09; 代码 快速排序&#xff08;双指针法&#xff09; 快速排序的精…

2024年06月编程语言流行度排名

点击查看最新编程语言流行度排名&#xff08;每月更新&#xff09; 2024年06月编程语言流行度排名 编程语言流行度排名是通过分析在谷歌上搜索语言教程的频率而创建的 一门语言教程被搜索的次数越多&#xff0c;大家就会认为该语言越受欢迎。这是一个领先指标。原始数据来自…

python中的抽象基类详解

在Python中&#xff0c;抽象基类&#xff08;Abstract Base Classes&#xff0c;简称ABCs&#xff09;是一种特殊的类&#xff0c;主要用于定义接口&#xff0c;即一组方法的规范&#xff0c;但不提供这些方法的实现。抽象基类不能被直接实例化&#xff0c;除非其所有抽象方法都…

【30天精通Prometheus:一站式监控实战指南】第15天:ipmi_exporter从入门到实战:安装、配置详解与生产环境搭建指南,超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…

(奇幻森林)POLYGON - Enchanted Forest - Nature Biomes - 3D Environment Art by Synty

各种雄伟的树木,装饰着优雅简化的树叶,在头顶形成了一个天堂般的树冠,在苔藓覆盖的森林地面上投下了宁静的咒语。 每一项资产,从引人入胜的环境材料到平缓的波浪状山丘,都经过精心制作,将您带到魔法和自然融合的地方。POLYGON-魔法森林-自然生物技术为数字领域注入真正魔…