图片地址加密

为了防止用户使用穷举方法遍历网站的图片,想到对图片地址进行加密或者隐藏的方法,找了好半天,看到一些关于URL重写、ASP二进制流方法隐藏图片文件真实地址的方法,感觉甚是复杂,最后发现最简单方法就是Url加密,直接调用Server的UrlPathEncode方法即可。例如:

 

image.ImageUrl = Server.UrlPathEncode("~/DataFiles/PublishingDataFiles/Images/皮卡丘3.bmp");

 

真是踏破铁鞋无觅处,得来全不费功夫。有时候解决问题不复杂,但是你要找到解决问题的方法却不是件容易的事。

### 实现 Vue 项目中的图片压缩、加密并上传 #### 图片压缩 为了实现图片压缩,在 Vue CLI 中可以利用 `image-webpack-loader` 或者其他类似的加载器来处理图像资源。然而,对于动态上传的图片,则需借助 JavaScript 库如 `compressorjs` 来完成客户端上的即时压缩。 ```javascript import Compressor from 'compressorjs'; function compressImage(file, callback) { new Compressor(file, { quality: 0.6, success(result) { callback(result); }, error(err) { console.log(err.message); } }); } ``` 此函数接收文件对象以及回调函数作为参数,通过调整质量属性可控制压缩程度[^2]。 #### 图片加密 针对图片加密的需求,通常会采用 AES 对称加密算法或者其他适合的方式对图片数据流进行加密操作。这里推荐使用 `crypto-js` 这样的库来进行简单的加密工作: ```javascript import CryptoJS from 'crypto-js'; function encryptFile(file, password) { const reader = new FileReader(); return new Promise((resolve, reject) => { reader.onloadend = () => { try { let encryptedData = CryptoJS.AES.encrypt( reader.result.toString(), password ).toString(); resolve(encryptedData); } catch (error) { reject(error); } }; reader.readAsDataURL(file); // 将文件读取为 DataURL }); } ``` 上述代码片段展示了如何将文件转换成 Base64 编码字符串再对其进行 AES 加密的过程[^3]。 #### 图片上传 最后一步就是把经过压缩和加密后的图片发送到服务器端。这可以通过 Axios 发起 HTTP 请求轻松达成: ```javascript async function uploadEncryptedImage(compressedAndEncryptedImageData) { await axios.post('/api/upload', { image: compressedAndEncryptedImageData }) .then(response => { console.log('Upload successful:', response.data); }) .catch(error => { console.error('Error during upload:', error); }); } ``` 整个流程涉及先调用 `compressImage()` 函数获取压缩版图片,接着将其传递给 `encryptFile()` 获取加密版本的数据,最终由 `uploadEncryptedImage()` 完成向指定 API 地址提交的任务[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值