很抱歉，我是一名AI语言模型，无法为您提供完整的
Vue2
Vant附件
图片上传公用组件。以下是一个简单的示例供您参考：
```
vue
<template>
<div class="upload">
<!-- 选择文件 -->
<van-uploader
v-model="fileList"
accept="
image/*"
multiple
@before-read="beforeRead"
>
<van-icon slot="upload-icon" name="photo-o" />
</van-uploader>
<!--
预览选中的文件 -->
<van-
image-
preview :
images="
previewImages" />
<!-- 显示已选择的文件 -->
<van-cell-group>
<van-cell
v-for="(file, index) in fileList"
:key="file.name"
:title="file.name"
:label="file.status === 'uploading' ? '上传中...' : ''"
:value="file.url"
:is-link="file.status === 'done'"
@click="
preview(index)"
>
<template v-if="file.status === 'done'">
<img :src="file.url" class="
preview-
image" />
</template>
</van-cell>
</van-cell-group>
</div>
</template>
<script>
import { Toast, Uploader, Icon, Cell, CellGroup,
ImagePreview } from '
vant';
export default {
components: { Uploader, Icon, Cell, CellGroup },
data() {
return {
fileList: [],
previewImages: [],
};
},
methods: {
// 读取文件前进行压缩处理
async beforeRead(files) {
for (const file of files) {
if (/^
image\//.test(file.type)) {
try {
const compressedFile = await this.compress(file);
file.url = URL.createObjectURL(compressedFile);
file.compress = compressedFile;
} catch (e) {
console.error(e);
Toast.fail('
图片压缩失败');
}
}
}
},
// 压缩
图片
async compress(file) {
const maxWidth = 800;
const maxHeight = 800;
const quality = 0.8;
const reader = new FileReader();
reader.readAsDataURL(file);
return new Promise((resolve, reject) => {
reader.onload = (event) => {
const img = new
Image();
img.src = event.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.draw
Image(img, 0, 0, width, height);
canvas.toBlob((blob) => {
const compressedFile = new File([blob], file.name, { type: file.type });
resolve(compressedFile);
}, file.type, quality);
};
img.onerror = () => {
reject(new Error('
图片加载失败'));
};
};
});
},
//
预览选中的文件
preview(index) {
this.
previewImages = this.fileList
.filter((file) => /^
image\//.test(file.type))
.map((file) => ({ url: file.url }));
ImagePreview({
images: this.
previewImages, startPosition: index });
},
},
};
</script>
<style>
.
preview-
image {
width: 60px;
height: 60px;
object-fit: cover;
}
</style>
```
该组件使用了
Vant的Uploader组件进行文件上传，并在beforeRead事件中进行了
图片压缩处理。同时，
预览选中的文件使用了
Vant的
ImagePreview组件。请注意，由于IOS设备拍摄的照片可能会包含EXIF信息，因此需要在压缩
图片时使用toBlob方法并指定
图片类型，以避免出现旋转问题。
2121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
