图片上传预览

最新推荐文章于 2023-10-26 09:05:13 发布
最新推荐文章于 2023-10-26 09:05:13 发布
阅读量151 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huihuixiaokeai/article/details/103766068
版权

图片上传预览

使用云盘存储路径<七牛云>

原理：点击上传图片时，访问接口使用七牛云的工具类把图片上传到七牛云空间，同时返回图片名称，上传成功后调用ElementUI的钩子函数，实现图片预览
缺点：会产生垃圾数据，要定时清理
<1>上传文件时的前端页面ElementUI
提示更改：action="****"

<el-row>
	<el-col :span="24">
		<el-form-item label="上传图片">
			<el-upload
					class="avatar-uploader"//样式
					action="****"//上传时的访问Controller路径--/xxxxx/upload.do
					:auto-upload="autoUpload"//是否自动上传--true
					name="imgFile"//图片名字imgFile
					:show-file-list="false"//是否展示上传列表
					:on-success="handleAvatarSuccess"//上传成功执行的方法
					:before-upload="beforeAvatarUpload">//上传前可以校验是否合格
				//判断图片访问地址imageUrl是否为null
				<img v-if="imageUrl" :src="imageUrl" class="avatar">//!=null
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>//==null
			</el-upload>
		</el-form-item>
	</el-col>
</el-row>

<2>js–Vue
提示更改：el: ‘#***’，this.imageUrl="<协议>–<域名>"+response.data;

var vue = new Vue({
        el: '#***',
        data: {
       	 	autoUpload:true
            imageUrl: null,//模型数据，用于上传图片完成后图片预览，初始值为null
            formData: {},//需要提交的表单数据
        },
        methods: {
//文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(file,filesList) {
            	//访问路径路径可变---域名+文件名称
                this.imageUrl="<协议>--<域名>"+response.data;
                this.$message({
                    type:response.flag?"success":"error",
                    message:response.message
                })
                //给formData对象添加属性，传输图片名称
                this.formData.img=response.data
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
		}
    })

<3>后端上传图片

    @RequestMapping("/upload")
    //(@RequestParam("****)前端文件提交时的name属性和后端MultipartFile参数名不同时必须添加此属性(***)为前端文件的name值，此处可以不添加
    //Result是一个--被序列化--的实体类用来--封装返回结果
    //MultipartFile  这个类一般是用来接受前台传过来的文件
    public Result upload(@RequestParam("imgFile") MultipartFile imgFile) {
        try {
        	//获取文件名 MultipartFile 的API
            String originalFilename = imgFile.getOriginalFilename();
            //获取最后一个·所在位置的索引
            int lastIndexOf = originalFilename.lastIndexOf(".");
            //返回一个新字符串，它是此字符串的一个子字符串。该子字符串始于指定索引处的字符，一直到此字符串末尾。
            String suffix = originalFilename.substring(lastIndexOf);
            //使用UUID
            String fileName = UUID.randomUUID().toString() + suffix;
            //使用七牛云的工具类，上传文件
            QiniuUtils.upload2Qiniu(imgFile.getBytes(), fileName);   
            //把生成的图片名称存储到Redis中        
			jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_RESOURCES,fileName);
			//页面回显fileName用来和域名结合实现图片预览
            return new Result(true, MessageConstant.PIC_UPLOAD_SUCCESS, fileName);
        } catch (IOException e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.PIC_UPLOAD_FAIL);
        }
    }

<4>七牛云和Redis定时清理使用详见下一篇

创建临时的路径来展示图片

原理：点击上传图片时，访问接口直接把图片存储到本地磁盘，同时返回图片名称，上传成功后调用ElementUI的钩子函数，实现图片预览
<1>上传文件时的前端页面ElementUI

<el-row>
	<el-col :span="24">
		<el-form-item label="上传图片">
			<el-upload 
					class="avatar-uploader"
 					action=""//上传后不需要去存储
					:auto-upload="autoUpload"//是否自动上传--false
					name="imgFile"//图片传输的名字
					:show-file-list="false"//是否展示上传列表
					:on-change="onchange"//图片上传成功或者失败都会执行
					:before-upload="beforeAvatarUpload">//上传前可以校验是否合格
				//判断图片访问地址imageUrl是否为null
				<img v-if="imageUrl" :src="imageUrl" class="avatar">//!=null
 				<i v-else class="el-icon-plus avatar-uploader-icon"></i>//==null
			</el-upload>
		</el-form-item>
	</el-col>
</el-row>

<2>js–Vue
提示更改：el: ‘#***’
创建临时的路径来展示图片获取文件名称拼接图片预览路径
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
方法源码：append(name: string, value: string | Blob, fileName?: string): void;
Blob(Binary Large Object)术语最初来自数据库（oracle 中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。

 var vue = new Vue({
        el: '#***',
        data: {
            autoUpload: false,//自动上传
            imageUrl: null,//模型数据，用于上传图片完成后图片预览
            param:"",//
            formData: {},//表单数据
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            onchange(file,filesList) {
                //获取window.URL对象
                var windowURL = window.URL || window.webkitURL;
                //创建临时的路径来展示图片获取文件名称拼接图片预览路径
                this.imageUrl=windowURL.createObjectURL(file.raw);
         		this.param=new FormData();
         	    this.param.append('file', file.raw, file.name);
        },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //添加
            handleAdd () {
            //指定表单类型
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
         //添加表单数据
                    this.param.append("name",this.formData.name);
                    this.param.append("code",this.formData.code);
                   .....

                    axios.post("/*****/add1.do?Ids=" + this.Ids,this.param,config).then((res)=>{
                    this.dialogFormVisible=false;
                        if(res.data.flag){
                            this.$message({
                                type:'success',
                                message:res.data.message
                            })
                        } else{
                            this.$message.error(res.data.message);
                        }
                    })
                }
        }
    })

<3>后端代码实现

@RequestMapping("/add1")
    public Result add1(Setmeal setmeal,Integer [] Ids,@RequestParam("file")MultipartFile imgFile) throws IOException {
    //获取文件初始名称
  String originalFilename = imgFile.getOriginalFilename ();
  //本地存储，地址可换
  imgFile.transferTo ( new File ( "E:\\temp\\" + originalFilename ) );
   try {
   //返回结果
            return new Result ( true, MessageConstant.ADD_***_SUCCESS );
        } catch (Exception e) {
            e.printStackTrace ();
            return new Result ( false, MessageConstant.ADD_****_FAIL );
        }
    }
慧慧小可爱
关注
图片上传带预览
qq_40180411的博客
10-22 680
分享做图片上传的时候，页面不提交就预览图片的两种方法： 亲测有效：可直接粘贴使用 方法一： 方法一实现代码如下： &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt..
基于JQuery实现图片上传预览与删除操作
10-22
在本文中，我们将深入探讨如何使用JQuery实现图片上传预览和删除功能。这个功能对于许多网站和应用程序来说是至关重要的，尤其是那些涉及到用户交互和内容上传的平台。以下是一步步实现这一功能的方法： 首先，我们...
vue实现图片上传预览功能
10-15
在前端开发中，实现图片上传预览功能是一个非常常见的需求。本文将详细介绍在Vue框架中如何实现这一功能，并通过实例代码展示具体实现方法。 首先，实现图片上传预览功能主要包含以下几个步骤： 1. 用户界面设计：...
强大的jQuery多图片上传预览代码.zip
07-11
代码片段： *{ margin:0;padding:0; } html,body{ font-family:Arial,Helvetica,sans-serif; } li{ list-style: none; } img{ border:none;display: block } .box{ width: 1024px;...
FormData图片上传预览插件特效代码
03-20
`FormData`对象在图片上传预览和处理过程中扮演了重要角色，尤其与Bootstrap和fileinput.js这样的前端框架结合时，可以实现高效且用户体验良好的图片上传预览插件。下面将详细解释`FormData`、图片上传预览以及如何...
jQuery 图片上传预览
08-23
--------------------------------- jquery图片上传预览插件，通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1，未经过其它jquery版本测试。 使用时，您可以根据需要，随意修改！ --------------------------------- =====更新日志：v1.0.1====== 1. 修改v1.0版本中，在使用模板预览时，重新选择图片，无法预览的问题 2. 其它的一些细微调整
html多图片上传并在线预览
01-10
html多图片上传并在线预览 用javascript实现
web图片上传预览
xiaojian90的博客
05-28 984
一、效果图 实现了选择图片后，预览图片。 实现对IE7+，Firefox，Chrome的支持，不需要插件支持。 二、uploadImg.html html> head> title>图片上传预览title> head> body> div id="localImag" align="center"> img id="preview" src="${ctx}/static
图片上传并预览
weixin_43609222的博客
07-05 1910
前言 由于在项目中遇到一个上传图片的地方，一直在用公司框架，自己想了一下应该动手自己写一个完整的上传加深下印象，以下实现了全动态添加、删除、保存和预览。 添加：动态添加上传图片的容器。 删除：实现删除当前图片。 预览：包含了反转、上一张、下一张、放大、缩小、还原和拖动换位置。 保存：实时监听是否上传完整。 废话不多说了，上代码。 一、完成一个上传的整体思路。 首先你要知道你要用到什么东西？需要如何去做。 第一步：需要实现上传的标签，<input type="fil...
JavaScript 图片上传预览
最新发布
wgq2020的博客
10-26 231
使用它可以读取本地文件，并在浏览器中预览。我们可以利用这个属性，实现图片上传预览。以上代码实现了图片上传预览的基本功能，如果您需要处理更多的上传操作，可以在这个基础上进行扩展。
图片上传及预览
weixin_42395736的博客
03-12 325
<input type="file" name="myfile"> <img src="" alt="" id="img"> 方式一：使用window.createObjectURL let input =document.getElementsByName('myfile')[0]// 获取input的file对象 let img=document.getElementById('img') input.addEventListener('change',()=>{
图片上传实时预览
TangChi1970的博客
06-15 169
文献种类：专题技术文献； 开发工具与关键技术：VS C# JavaScript 作者： 汤池 ；年级：20级 ；撰写时间： 2021 年 6月 18日 文献编号： 归档时间： 年 月 日 图片上传实时预览 开发工具与关键技术： VS JavaScript 作者：汤池 撰写时间：2021/ 06/18 1.首先我们需要一个img标签放在需要显示的位置上面，因为选上传文件的标签无法去显示选择的图片， 2.让type为file的input标签设
上传图片预览方法
sxfcct的专栏
10-31 4994
上传文件是一种很普通的Web应用，尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个主题相关的内容（只限前端部分，上传的实现当然就不在此列了），关键词是：Javascript、DOM和Firefox。 表单 　　先创建一个file表单域，我们需要用它来浏览本地文件。 　　试下效果： 　　 判断文件类型 　　当用户选择了一个图片文件时，我们希望他能马上
图片上传之前预览图片
爱吃rabbit的mq
06-04 213
<input type="file" id="file_head_img" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="showPreview(this);" style="display:none;"> <script> function showPreview(sour...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值