el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作

2024-06-24 10:36
文章标签 线上 操作 图片 http 格式 el 链接 预览 上传 upload 照片 回显

本文主要是介绍el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
在这里插入图片描述

   <div  v-for="(info, index) in zsjzqwhxqList.helicopterTourInfoList"  :key="info.id" >编辑上传图片// oss返回线上地址http链接格式：<el-form-itemlabel="巡视结果照片":label-width="formLabelWidth"><el-upload:action="'http://×××××uploadFile'"list-type="picture-card":limit="10":on-exceed="limitError":on-success="(response, file, fileList) =>imgSuccess(response,file, fileList,index ) ":on-error="imgError":on-remove="(file, fileList) =>handleRemove(file,fileList, index) ":file-list="getFileList(info.url)":on-preview="handlePreview"class="horizontal-upload"  ></el-upload></el-form-item>//文件流格式:<el-col :span="24"><el-form-itemlabel="巡视结果照片":label-width="formLabelWidth"><el-upload:action="'×××接口地址/uploadFile' "list-type="picture-card":limit="10":on-exceed="limitError":on-success="(response, file, fileList) =>imgSuccess(response,file,fileList,index) ":on-error="imgError":on-remove="(file, fileList) =>handleRemove(file,fileList,index ) ":on-preview="handlePreview":file-list="getFileList(index)"class="horizontal-upload" ></el-upload></el-form-item></el-col>

然后就是方法了有2种

     //http在线返回:返回的是http形式直接浏览器可以打开// async xiaziaT() {//     for (const tourInfo of this.zsjzqwhxqListck//         .helicopterTourInfoList) {//         if (tourInfo.url) {//             const urls = tourInfo.url.split(",");//             for (const url of urls) {//                 try {//                     const data = await getFileUrl({ url });//                     console.log(data);//                     // 更新 tourInfo.imageUrl 以回显图片//                     tourInfo.imageUrl = data.data.msg;//                 } catch (error) {//                     console.error(`无法下载文件 ${url}`, error);//                 }//             }//         }//     }// },//文件流：后端接口返回文件流格式async xiaziaTwh() {this.teamPhotoUrls = [];const tempTeamPhotoUrls = [];for (const [tourIndex,tourInfo,] of this.zsjzqwhxqList.helicopterTourInfoList.entries()) {if (tourInfo.url) {console.log(tourInfo.url, "tourInfo.url");const urls = tourInfo.url.split(",");tempTeamPhotoUrls[tourIndex] = [];for (const url of urls) {try {const data = await downloadFile({ url });let blob = new Blob([data], {type: "image/jpg",});console.log(data);const imageUrl = data.data.msg;tempTeamPhotoUrls[tourIndex].push({name: url.split(",").pop(),url: imageUrl,});console.log(this.fileList, "234");} catch (error) {console.error(`无法从下载文件 ${url}`, error);}}}}this.teamPhotoUrls = tempTeamPhotoUrls;},

公共方法：

 data() {return {fileList: [],fileListCache: {},zsjzqwhxqList: [],zsjzqwhxqListck: [],},
http在线方法：// getUrls(urlString) {//     if (typeof urlString !== "string" || !urlString) {//         return [];//     }//     return urlString.split(",");// },// getFileList(urlString) {//     if (this.fileListCache[urlString]) {//         return this.fileListCache[urlString];//     }//     const urls = this.getUrls(urlString);//     const fileList = urls.map((url, index) => ({//         name: `图片 ${index + 1}`,//         url: url,//     }));//     this.fileListCache[urlString] = fileList;//     return fileList;// },

//防止上传和回显图片了重复加载，因为是根据url:'里面有几个url,隔开会请求几遍文件流地址避免重复渲染'computed: {computedFileList() {return this.teamPhotoUrls.map((photos, index) => {return photos.map((photo) => ({name: photo.name,url: photo.url,status: "done", // 设置文件状态为已完成}));});},

//上传功能
limitError(files, fileList) {this.$message.error("最多只能上传10张图片");},imgSuccess(response, file, fileList, index) {console.log(file, fileList);// 获取当前的 URL 列表let currentUrls =this.zsjzqwhxqList.helicopterTourInfoList[index].url || "";// 将新上传的文件 URL 添加到当前的 URL 列表中const newUrl = file.response.msg;if (currentUrls) {currentUrls += "," + newUrl;} else {currentUrls = newUrl;}// 更新 URL 列表和文件列表this.zsjzqwhxqList.helicopterTourInfoList[index].url = currentUrls;this.zsjzqwhxqList.helicopterTourInfoList[index].fileList = fileList;this.$message.success("文件上传成功");// this.$nextTick(() => {// this.xiaziaTwh();// });},imgError(err, file, fileList) {this.$message.error("文件上传失败");},limitError(files, fileList) {this.$message.error("上传文件数量超出限制");},// 删除图片handleRemove(file, fileList, index) {console.log("Removing file:", file);console.log("Removing fileList:", fileList);console.log("Removing index:", index);const url ="××接口地址:10007/zxjcgjgl/helicopterTourManagement/deleteImage";let imageUrl;if (file.raw) {imageUrl = file.response.msg;console.log("6666");} else {imageUrl = file.name;console.log("7777");} fetch(url, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ url: imageUrl }),}).then((response) => response.json()).then((data) => {console.log("响应数据:", data);let currentUrls = this.zsjzqwhxqList.helicopterTourInfoList[index].url;console.log("删除前的当前URL:", currentUrls);if (data.code === 200) {if (currentUrls) {let urlArray = currentUrls.split(",");let newUrlArray = urlArray.filter((url) => url !== imageUrl);this.zsjzqwhxqList.helicopterTourInfoList[index ].url = newUrlArray.join(",");}this.zsjzqwhxqList.helicopterTourInfoList[index].fileList = fileList;this.$message.success("图片删除成功");} else {console.error("错误:", data);this.$message.error("图片删除失败");}}).catch((error) => {console.error("错误", error);this.$message.error("图片删除失败");});},
//预览图片：handlePreview(file) {this.$alert(`<img src="${file.url}" style="width: 100%;">`,"图片预览",{dangerouslyUseHTMLString: true,confirmButtonText: "关闭",});},

这篇关于el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1089901。

相关文章

使用Python快速实现链接转word文档

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import
阅读更多...
0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型，3步搞定一个应
阅读更多...
Python利用PIL进行图片压缩

Python利用PIL进行图片压缩

《Python利用PIL进行图片压缩》有时在发送一些文件如PPT、Word时,由于文件中的图片太大,导致文件也太大,无法发送,所以本文为大家介绍了Python中图片压缩的方法,需要的可以参考下... 有时在发送一些文件如PPT、Word时，由于文件中的图片太大，导致文件也太大，无法发送，所有可以对文件中的图
阅读更多...
轻松上手MYSQL之JSON函数实现高效数据查询与操作

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》：本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE
阅读更多...
java获取图片的大小、宽度、高度方式

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象（该对象里面是图片）MultipartFile对象（该对象里面是图片）总结java获取图片
阅读更多...
使用C++将处理后的信号保存为PNG和TIFF格式

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解
阅读更多...
Java实战之自助进行多张图片合成拼接

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前
阅读更多...
C++实现封装的顺序表的操作与实践

C++实现封装的顺序表的操作与实践

《C++实现封装的顺序表的操作与实践》在程序设计中,顺序表是一种常见的线性数据结构,通常用于存储具有固定顺序的元素,与链表不同,顺序表中的元素是连续存储的,因此访问速度较快,但插入和删除操作的效率可能... 目录一、顺序表的基本概念二、顺序表类的设计1. 顺序表类的成员变量2. 构造函数和析构函数三、顺序表
阅读更多...
使用C++实现单链表的操作与实践

使用C++实现单链表的操作与实践

《使用C++实现单链表的操作与实践》在程序设计中,链表是一种常见的数据结构,特别是在动态数据管理、频繁插入和删除元素的场景中,链表相比于数组,具有更高的灵活性和高效性,尤其是在需要频繁修改数据结构的应... 目录一、单链表的基本概念二、单链表类的设计1. 节点的定义2. 链表的类定义三、单链表的操作实现四、
阅读更多...
Python利用自带模块实现屏幕像素高效操作

Python利用自带模块实现屏幕像素高效操作

《Python利用自带模块实现屏幕像素高效操作》这篇文章主要为大家详细介绍了Python如何利用自带模块实现屏幕像素高效操作,文中的示例代码讲解详,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、获取屏幕放缩比例2、获取屏幕指定坐标处像素颜色3、一个简单的使用案例4、总结1、获取屏幕放缩比例from
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2