20200706
vant-uploader上传的图片大小通过preview-size设置、默认80px,开发需求是九宫格似的上传样式展示，刚开始通过在computed中计算
// computed: {
// setPreviewSize:function () {
// let width = window.screen.width;
// if(width < 375){
// return 80
// }else{
// return 100
// }
// },
// },
之后的解决方案是，获取div的clientWidth,计算平均宽度，(this.$refs.photoCard.clientWidth-16)/3
<!--
* @Author:
* @Date: 2020-04-22 10:00:53
* @LastEditors:
* @LastEditTime: 2020-07-06 11:58:34
* @Description:
-->
<template>
<div class="photo_card" ref="photoCard">
<!-- :max-size="maxSize" -->
<van-uploader
v-model="fileList"
:multiple="count>1?true:false"
:max-count="count"
:before-read="beforeRead"
:after-read="afterRead"
:before-delete="deleteUploadImg"
upload-icon="plus"
:preview-size="previewSize"
>
<!-- :preview-size="setPreviewSize" -->
</van-uploader >
</div>
</template>
<script>
import {uploadFiles} from '@/api/index';
import {Image,ImagePreview,Grid,GridItem,Icon,Toast,Uploader} from 'vant';
// import 'vant/lib/uploader/style';
export default {
name:'uploadImages',
components: {
[Image.name]:Image,
[Grid.name]: Grid,
[GridItem.name]: GridItem,
[Icon.name]:Icon,
[Toast.name]:Toast,
[Uploader.name]:Uploader
},
props:{
imgUrlList: Array,
count: { //最多选择图片的张数，默认9张
type: Number,
default: 9
},
isBeforeRead:{
type: Boolean,
default: false
},
nextevent:Function,
name:String,
maxSize:{
type: Number,
default: 3 * 1024 * 1024
}
},
data(){
return{
fileList:[],
previewSize:100,
}
},
// computed: {
// setPreviewSize:function () {
// let width = window.screen.width;
// if(width < 375){
// return 80
// }else{
// return 100
// }
// },
// },
created () {
// console.log(this.imgUrlList,'imgUrlList');
this.fileList = this.imgUrlList.map(v=>({
url :v,
status:'success',
message:''
}))
},
mounted(){
this.previewSize = (this.$refs.photoCard.clientWidth-16)/3
},
methods: {
// 返回布尔值
beforeRead(file) {
// console.log(file,'beforeRead');
if(file instanceof Array){//判断是否是数组
file.forEach(element => {
this.verifyFile(element)
});
}else{
this.verifyFile(file)
}
return true;
},
verifyFile(file){
const format = ["jpg", "png",'jpeg']
const index = file.name.lastIndexOf('.')
const finalName = file.name.substr(index + 1)
if (!format.includes(finalName.toLowerCase())) {
Toast('请上传'+format.join(',')+'格式图片');
return false;
}
// if(file.size > this.maxSize ){ //1M(MB) == 1048576 B（字节）
// Toast('文件大小超出限制')
// return false;
// }
},
afterRead(file) {
console.log('afterRead',file);
// 此时可以自行将文件上传至服务器
const formData = new FormData();
if(file instanceof Array){//判断是否是数组
file.map(element => {
element.status = 'uploading';
element.message = '上传中...';
formData.append("file", element.file);
});
}else{
file.status = 'uploading';
file.message = '上传中...';
formData.append("file", file.file);
}
uploadFiles(formData)
.then(res => {
if (res.code == 100) {
let urlList = res.data;
if(file instanceof Array){//判断是否是数组
file.map((element,index) => {
element.status = 'success';
element.message = '';
element.url = urlList[index]
});
}else{
file.status = 'success';
file.message = '';
file.url = urlList[0]
}
// console.log(this.fileList,'uploadFiles---.fileList=');
this.$emit('nextevent', this.fileList.map(v=>v.url) ,this.name)
} else {
Toast('上传失败')
}
})
.catch(req => {
Toast('上传失败')
});
},
deleteUploadImg(delItem){
this.fileList = this.fileList.filter(v=>v.url!=delItem.url);
this.$emit('nextevent', this.fileList.map(v=>v.url) ,this.name)
},
}
}
</script>
<style lang="scss">
.photo_card{
// padding: 0 20px;
.van-uploader {
width: 100%;
}
.van-uploader__wrapper{
width: 100%;
}
.van-uploader__upload{
border-radius: 0;
background: #F6F7F8;
border: 1px dashed #d1d1d1;
margin: 0 0 .75rem 0;
}
// .van-uploader__preview{
// // width: 30%;
// margin: 0 8px 8px 0;
// }
.van-uploader__preview:nth-of-type(3n){
margin-right: 0;
}
.van-uploader__preview-image,.van-uploader__mask{
border-radius: 0;
}
.van-uploader__upload-icon{
color: #999;
font-size: 40px;
}
}
</style>
20200506
{"errMsg":"chooseImage:ok","localIds":["wxLocalResource://4081417600","wxLocalResource://4081417601"]}
{"errMsg":"getLocalImgData:permission denied","err_msg":"getLocalImgData:permission denied"}
<van-uploader
v-model="detailPics"
:after-read="afterRead"
:before-read='beforeRead'
:max-count="9"
multiple
/>
// 返回布尔值
beforeRead(file) {
console.log(file, "beforeRead");
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
const size = file.size;
const format = ["jpg", "png", "jpeg"];
if (size > 512000) {
// 格式错误或大小超过限制
Toast("文件大小超出限制");
return false;
}
if (!format.includes(finalName.toLowerCase())) {
Toast("请上传 jpg,png,jpeg 格式的图片");
return false;
}
return true;
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file, file instanceof Array,"afterRead");
// file.status = "uploading";
// file.message = "上传中...";
const formData = new FormData();
if(file instanceof Array){//判断是否是数组
file.forEach(element => {
formData.append("file", element.file);
});
}else{
formData.append("file", file.file);
}
uploadFiles(formData)
.then(res => {
if (res.code == 100) {
// file.status = "success";
// file.message = "上传成功";
this.detailPics = res.data
this.$emit('nextevent',res.data)
} else {
// file.status = "failed";
// file.message = "上传失败";
}
})
.catch(req => {
// file.status = "failed";
// file.message = "上传失败";
});
},
