前端上传图片变成var

Posted 2023-03-25

qs1: 前端上传图片并展示
an1: 上传file格式图片转为base64格式
qs2: 要将上传的图片在宽高固定的窗口里显示完整
an2: 把获取的base64的图片链接，赋值到image的src上，然后获取到图片的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。
#### 具体实现：
....结构：
<div class="upload">
<div class="img-box">
<div class="image-no" @click.stop="openFile" v-if="!image.url">
<div class="tip">
<img src="./../../assets/myopus/icon-upload.png" alt="" />
<div class="text">请上传您的照片</div>
</div>
</div>
<div ref="window" class="image-yes" @click.stop="openFile" v-else>
<div class="img">
<img :style="isWidth? 'width:89.333333vw' : 'height: 56vw'" :src="image.url" alt="" />
</div>
</div>
<input
type="file"
ref="selectFileImg"
accept="image/*"
v-show="false"
@change="selectFileImg"
/>
</div>
<div class="des-box">
<van-field
class="des"
v-model="des"
rows="3"
autosize
type="textarea"
maxlength="20"
placeholder="请简要描述您的照片，体现环保美~"
show-word-limit
/>
</div>
<div class="submit">
<button @click.stop="submit()">确认上传</button>
</div>
</div>
....数据:
isWidth: true, // 上传的图片展示时，是以宽为主还是高为主
image:
file: null,
url: null,
,
des: '', // 照片描述文字
....方法：
// 创建点击事件并出发file选择图片
openFile()
const click = new window.MouseEvent("click");
this.$refs.selectFileImg.dispatchEvent(click);
,
// 文件选择
selectFileImg()
const input = this.$refs.selectFileImg;
const files = input.files;
if (files.length < 1) return;
const image = files[0];
const size = 20 * 1024 * 1024; // 限定大小
if (!image.type.includes("image"))
this.$toast("必须上传图片");
input.value = "";
return;

if (image.size > size)
this.$toast("图片大小不能超过20M");
input.value = "";
return;

this.image.file = image;

// 图片转为base64格式
var reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (e) =>
this.image.url = e.currentTarget.result
// 新建image元素，获取宽高比，与用户上传图片的宽高比 进行比较，得出用宽还是占满
var image = new Image();
image.src = this.image.url
image.onload= () =>
// 获取上传图片宽高
const width = image.width;
const height = image.height;
// console.log(width,height)
// 获取窗口宽高比
const window = this.$refs.window
// console.log(window.offsetHeight, window.offsetWidth)
const key = window.offsetWidth/window.offsetHeight
const mykey = width/height
if(mykey <= key) return this.isWidth = false
this.isWidth = true

;
,
// 上传接口
submit()
if(!this.image.url) return this.$toast('请上传您的照片')
if(!this.des.trim()) return this.$toast('请输入照片简述')

console.log("开始上传")
,
....样式:
<style lang="scss" scoped>
.upload
width: 100vw;
min-height: 100vh;

.img-box
width: 89.333333vw;
height: 56vw;
overflow: hidden;
border: 1px dashed #ec851a;
border-radius: 3.2vw;
margin: 4vw auto;

.image-no
width: 89.333333vw;
height: 56vw;
background: rgba(236, 133, 26, 0.04);
display: flex;
justify-content: center;
align-items: center;

.tip

img
display: block;
width: 10vw;
margin: 0 auto 3vw;


.text
font-size: 14px;
color: #ec851a;
letter-spacing: 1px;




.image-yes
width: 89.333333vw;
height: 56vw;
display: flex;
justify-content: center;
align-items: center;

.img

img
display: block;





.des
width: 89.333333vw;
background-color: #fbfbfb;
border-radius: 3.2vw;
margin: 0 auto 8vw;

::v-deep.van-field__control
font-size: 14px;


::v-deep.van-field__word-limit
font-size: 14px;
color: #c9c9c9;



.submit
text-align: center;

button
width: 40vw;
height: 11.2vw;
background-color: #ec851a;
border: none;
border-radius: 5.333333vw;
outline: none;
font-size: 16px;
color: #fff;



</style> 参考技术A 前端上传图片变成var是因为系统不兼容导致的，因为在前端上传图片的话，图片的格式是要修改。修改和系统互相兼容的格式才可以，不然的话就会被误认为无法识别，变成var。 参考技术B 只有将前端上传图片，做一个集成就可以变成var，只有将图片组合起来，就会变成你所需要的var，这样你用起来的时候会非常方便，前端你只需要保持图片的稳定性和它的可观赏性就可以了，其他的其实你不用考虑的，就这么简单 参考技术C 只有将前端上传图片,做一个集成就可以变成var,只有将图片组合起来,就会变成你所需要的var,这样你用起来的时候会非常方便,前端你只需要保持图片的稳定性和它的可观赏性就可以了,其他的其实你不用考虑的,就这么简单 参考技术D 上传图片文件这种需求在项目中经常遇到，不管是pc端还是移动端都会遇到上传图片的功能。由于现在手机拍摄功能的日益强大，相机拍摄的图片也越来越大动辄就是几M甚至十几M。这样上传可能对服务器会造成不小的压力，上传速度和体验也会大打折扣，所以经常就要限制上传的大小尺寸。如果在前端对图片进行压缩后上传，这样问题就能得到一定的缓解。